Question

我在网上寻找2小时，我找不到任何可用于我的菜单，让活动页面看起来另一种方式。这是我的代码：

HTML

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Whats New!</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
<div class="clear"></div>
</ul>
</div>

如果其中一条线路是这样的：

<li class="active"><a href="#">Home</a></li>

按钮看起来不一样，我尝试使用php，jquery，但没有任何工作，所以我需要一些东西把'class = active'从当前页面放到我的li。

Answer 1

试试这个完整的代码

<!DOCTYPE html>

<head>

 <!-- javascript -->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
  $( document ).ready(function() {


  $('.menu ul li').click(function(){
        $('.menu ul li').removeClass('active');
       $(this).addClass('active');
     });

  });
 </script>

</head>

<body>

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Whats New!</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
<div class="clear"></div>
</ul>
</div>

</body>

点击此处直播演示http://jsfiddle.net/Yn2RY/2/

Answer 2

因此，您可以将当前页面名称放入PHP脚本，然后循环菜单。

$curr_page = 'Here is your current page name(one of the $pages)';

$pages = array('Home', 'About', 'Whats New!', 'Products', 'FAQ', 'Support');

echo '<div class="menu"><ul>';

foreach($pages as $page) {
    if($page == $curr_page) {
        echo "<li class="active"><a href="#">$page</a></li>";
    }
    else {
        echo "<li><a href="#">$page</a></li>";
    }
}

echo '<div class="clear"></div></div></ul>';

jQuery中的另一个例子：

$(document).ready(function() {
    var curr_page = "Here is your current page name";

    $('.menu > ul > li').each(function() {
        if($(this).text() == curr_page) {
            $(this).addClass('active');
            return false;
        }
    });


});

Answer 3

在foreach语句中，您可以看到简写结构，决定该li是否有效。变量currentPage保存页面名称，与数组中的某个值相同。例如，您可以从$ _GET获取currentPage。

代码：

<?php $menu = array("Home",
                    "About",
                    "Whats New!",
                    "Products",
                    "FAQ",
                    "Support",) ?>

<div class="menu">
<ul>
<?php 

foreach($menu as $item)
{
  $active = ($item==$currentPage) ? " class='active'" : '';
  echo "<li><a href="$item"$active>$item</a></li>";
}
?>
<div class="clear"></div>
</ul>
</div>

Answer 4

查看这篇介绍如何获取当前页面网址的文章： Get current page url

然后你可以有这样的逻辑，

<?php 
  if ($currenturl == $Thisurl)
  echo "class=""active"";
?>

如何使我的菜单活跃课程

4 个答案: