Question

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

<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，或者有什么方法可以解决这个问题？

Answer 1

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

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

Answer 2

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

享受！

Answer 3

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

Answer 4

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

替换＆＃39; .nav li＆＃39;使用更适合您的DOM结构的东西。例如，如果您的包装器div有一类菜单，请执行：jQuery('.menu li')

Answer 5

添加存储当前页面的会话变量（包括头文件之前）。在头文件中检查此值并指定类。

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

Answer 6

在我看来，使用速记代码清洁代码。

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

Answer 7

对于上面的问题，我已经使用jQuery在codebins上完成了解决方案。

DEMO： http://codebins.com/bin/4ldqpa4

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

1）在标头标签中包含最新的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");
        });
});

在导航菜单中添加一个类

7 个答案: