具有活动类更改的公共标头

时间:2015-06-04 09:56:59

标签: javascript jquery html header

您好我的网站有一组网页我试图为所有三个页面创建一个公共标题并添加了一个点击功能但是当我点击该链接时它会带我到那个页面但是活动的类功能不是工作。帮助我。提前谢谢。

这是常见的header.php

<ul id="navigation" class="nav navbar-nav" style="position:relative;">
    <li class="active op"><a href="/link1">link1</a></li>
    <li><a href="/link2">link2</a></li>
    <li><a href="/link3">link3</a></li>
    <li><a href="link4">link4</a></li>
</ul>

这是我在header.php文件中添加的jquery代码

<script>
$(document).ready(function() {

    $('#navbar li').on('click', function() {
        $('li.active').removeClass('active op');
        $(this).addClass('active op');
    });
});
</script>

1 个答案:

答案 0 :(得分:0)

尝试此代码我曾遇到过同样的问题。这样可以正常使用

    $(function() {
     var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
     pgurl = "/vv/"+pgurl;
     $("#navigation li").each(function(){
         var link = $("a",this).attr('href');   
          if(link == pgurl){              
                $(this).addClass("active op");
          }
     })
});

不要忘记在它之前添加一些库..