Question

您好我正在尝试创建一个投资组合网站。为了不必为每个页面重新创建标题，我决定使用PHP include函数添加它。我现在唯一的问题是，当我点击链接导航到另一个页面时，活动链接不会分别更改。
包含的HTML

<ul id="main-menu">
     <li><a href="index.php" class="active">home</a></li>
     <li><a href="about.php">about us</a></li>
     <li><a href="portfolio.php">portfolio</a></li>
     <li><a href="contact.php">contact</a></li>
</ul>

使用Javascript：

 $(document).ready(function(){
    var $menu = $("ul#main-menu li a");                
    $menu.click(function(){
        $menu.each(function(){
            $(this).removeClass("active");
        });
        $(this).addClass("active");                  
    });
 });

我知道问题是每次页面加载时 - 它会将类活动重置为第一个链接。我不知道的是：如何将活动类动态添加到页面匹配链接中？

Answer 1

你需要这个：

  $(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#main-menu li a").removeClass('active');
        $("ul#main-menu li a[href^='"+currentPHP+"']").addClass('active');
  });

Answer 2

尝试创建一个在页面加载时运行的函数，该函数选择与页面具有相同href的超链接。

或者，通过AJAX加载页面的主要内容，而不是传统的页面位置更改。 JQuery有一个很好的AJAX实现。在线搜索jquery ajax。

另一种方法是在超链接上创建一个cookie，然后通过读取cookie来设置所选的cookie。虽然这是非常不可靠的（后退按钮，手动URL输入等）。

Answer 3

<强> SIMPLE：

var link = document.location.href.split('/').slice(-1);   // retrieve page name
$('#main-menu li a.active').removeClass('active');        // remove class 'active'
$('#main-menu li a[href$="'+link+'"]').addClass('active');// and add it to a matching link

如何将活动状态类动态更改（添加）到导航链接

3 个答案:

jsBin demo