在导航菜单中添加类 - adding a class in the navigation menu

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

<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、About、Test），我都有Index.php、About.php和Test.php，所有这些文件都包括header.php！

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

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

<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>

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

我在我的一个静态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>

享受吧！

为每个li标记创建唯一的id，当单击链接时，如果使用jquery.attr函数

则更改类

<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')

添加一个会话变量，用于存储当前页面（包括头文件之前）。在头文件中检查此值并分配类。

$_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>

在我看来，如果需要更干净的代码，请使用简写。

<?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>

对于上面的问题，我已经使用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);
    });
});

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

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

注意：删除setTimeout函数Wrapper，只需保留里面的代码行脚本

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