4

考虑到这种情况，我有以下菜单：

<ul>
<li><a href="index.php">Index</a></li>
<li><a href="about.php">About</a></li>
<li><a href="test.php">Test</a><li>
</ul

菜单位于 header.php 中。对于每个页面（索引、关于、测试），我都有 index.php、about.php 和 test.php，所有这些文件都包含 header.php！

当我们在不同的页面上时，我需要向 li 添加一个类。所以如果我们在about.php上，应该在第二个li上添加类。

有什么办法可以处理 jQuery，或者有什么方法可以处理这个问题？

4

7 回答 7

6 
<ul>
<li><a href="index.php" <?php if($_SERVER['PHP_SELF']=="/index.php") echo 'class="someclass"'; ?> >Index</a></li>
<li><a href="about.php" <?php if($_SERVER['PHP_SELF']=="/about.php") echo 'class="someclass"'; ?> >About</a></li>
<li><a href="test.php" <?php if($_SERVER['PHP_SELF']=="/test.php") echo 'class="someclass"'; ?> >Test</a><li>
</ul>

这可能不是最好的方法，但它可以在服务器端完成任务。

于 2012-07-20T12:51:11.603 回答
4

我在我的一个静态 HTML 网站上使用了类似的东西，您可以对其进行调整：

<div id="navigation">

                <?php $currentPath = $_SERVER['REQUEST_URI']; ?>
                <?php $currentClass = ' class="current"'; ?>

                <ul id="nav">
                    <li<?php if( $currentPath == "/" ) { echo $currentClass; } ?>><a href="/">Home</a></li>
                    <li<?php if( $currentPath == "/market-challenge/" ) { echo $currentClass; } ?>><a href="/market-challenge/">Market <br />Challenge</a></li>
                    <li<?php if( $currentPath == "/environmental-benefits/" ) { echo $currentClass; } ?>><a href="/environmental-benefits/">Environmental <br />Benefits</a></li>
                    <li<?php if( $currentPath == "/technology/" ) { echo $currentClass; } ?>><a href="/technology/">Technology</a></li>
                    <li<?php if( $currentPath == "/contact/" ) { echo $currentClass; } ?>><a href="/contact/">Contact</a></li>
                </ul>

            </div>

享受！

于 2012-07-20T12:53:08.707 回答
2

为每个 li 标签创建唯一的 id，如果使用 jquery .attr 函数，则单击链接时更改类

于 2012-07-20T12:49:38.167 回答
2 
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      jQuery('.nav li').each(function() {
      var href = jQuery(this).find('a').attr('href');
      if (href === window.location.pathname) {
      jQuery(this).addClass('active');
    }
  });

});  
</script>

将“.nav li”替换为更适合您的 DOM 结构的内容。例如，如果您的包装器 div 有一类菜单，请执行以下操作：jQuery('.menu li')

于 2012-07-20T12:55:12.807 回答
2

添加一个存储当前页面的会话变量（在包含头文件之前）。检查头文件中的这个值并分配类。

$_SESSION['currentPage'] = 'index';
$_SESSION['currentPage'] = 'about';
$_SESSION['currentPage'] = 'test';

在标题中，

<ul>
<li><a href="index.php" <?php if($_SESSION['currentPage']=="index") echo 'class="selected"' ?>>Index</a></li>
<li><a href="about.php" <?php if($_SESSION['currentPage']=="about") echo 'class="selected"' ?>>About</a></li>
<li><a href="test.php" <?php if($_SESSION['currentPage']=="test") echo 'class="selected"' ?>>Test</a><li>
</ul>
于 2012-07-20T13:04:38.123 回答
2

在我看来，使用简写 if for 更简洁的代码。

<?php $self = $_SERVER['PHP_SELF']; ?>
<ul>
    <li><a href="index.php" <?php echo ($self == "/index.php" ? 'class="selected"' : ''); ?>>Index</a></li>
    <li><a href="about.php" <?php echo ($self == "/about.php" ? 'class="selected"' : ''); ?>>About</a></li>
    <li><a href="test.php" <?php echo ($self == "/test.php" ? 'class="selected"' : ''); ?>>Test</a></li>
</ul>
于 2012-07-20T13:07:36.620 回答
2

对于上述问题，我已经使用 jQuery 完成了代码箱的解决方案。

演示： http ://codebins.com/bin/4ldqpa4

在这里，我提到了执行上述解决方案的步骤。

1) 在 header 标签中包含最新的 jQuery.js 和 querystring-0.9.0.js javascript 文件。

2）HTML

<div id="panel">
  <ul class="menu">
    <li>
      <a href="#?page=0">
        Index
      </a>
    </li>
    <li>
      <a href="#?page=1">
        About
      </a>
    </li>
    <li>
      <a href="#?page=2">
        Test
      </a>
      <li>
    </ul>
</div>

3）CSS

ul.menu{
  border:1px solid #112266;
  background:#ccc;
}
ul.menu li{
  list-style:none;
  display:inline-block;
  margin-left:10px;
  padding:0px;
  width:60px;
  text-align:center;
}
ul.menu li:hover{
  background:#343434;
}
ul.menu li a{
  padding:0px;
  color:#113399;
  text-decoration:none;
}
ul.menu li:hover a{
  color:#c6b744;
  text-decoration:underline;
}
ul.menu li.active{
  background:#343434;
}
ul.menu li.active a{
  color:#c6b744
}

4）jQuery：

$(function() {
    $(".menu li").click(function() {
        setTimeout(function() {
            var page = $.QueryString("page");
            $(".menu li").removeClass("active");
            $(".menu li:eq(" + page + ")").addClass("active");
        }, 200);
    });

});

在上述解决方案中，我必须设置像 #?page= 这样的 href 链接，因为在 bin 上运行带有新页面重定向的 java 脚本是不可能的，而且我必须使用 setTimeout 函数，因为当前页面没有被重定向，只需更改其查询#?page= 在同一页上的字符串。

如果你想在你的项目中使用上述解决方案，那么将上面的 jQuery 脚本放在公共位置，以便它将在每个菜单链接上执行并将当前页面链接设置为活动类。

注意：删除 setTimeout 函数包装器，只需在其中保留代码行脚本。如下所示：

$(function() {
        $(".menu li").click(function() {
             var page = $.QueryString("page");
             $(".menu li").removeClass("active");
             $(".menu li:eq(" + page + ")").addClass("active");
        });
});
于 2012-07-20T13:54:09.187 回答