Question

问题

简而言之。

a）mysite.tld（没有任何反应）

b）mysite.tld / somepage（.active is added）

正如你所看到的，b）将代码添加.active类，但如果url是a）代码将忽略

然而，在主页上，我不希望href可以说 href =＆＃34; index.html＆＃34; 或其他什么。相反，它只是 href =＆＃34; mysite.tld＆＃34;

守则

<script type="text/javascript">
$("#woo_trigger").click(function(){
$("div#sidebar").hide();

Answer 1

您是否尝试过记录变量以查看页面加载后返回的内容？如果您使用的是chrome，则可以打开开发人员控制台并查看记录的内容。或者，您可以使用console.log()

代替alert()

    var path = location.pathname.split('?')[0];
    var start = path.lastIndexOf('/') + 1;
    var activeLink = path.substr(start);

    consolel.log(path);
    console.log(start);
    console.log(activeLink);

    var parent = $('a[href*="' + activeLink + '"]').parent('li');
    // These two lines check if you have dropdowns in your nav-bar

       if (parent.closest('ul').hasClass('dropdown-menu')) {
                parent.parents('.dropdown').addClass('active');
       }

    parent.addClass('active');

一旦你确定正在提取适当的变量，id建议将链接缩小到它可能位于的标记或类，并使用带有标记（$）的结尾而不是包含（*）

 var parent = $('ul li a[href$="' + activeLink + '"]').parent();

我可能还建议通过setting breakpoints using the chrome DevTools

进行调试

Answer 2

我认为这只是一个临时解决方案，因为location.href会返回当前的URI。

if(location.href ==  //example.something) {
    // add active class here
} else {
    // your code here
}

使用jQuery将活动类添加到Bootstrap导航栏

2 个答案: