Question

我已经设法让导航改变了它的类，如果它已被选中，但我无法解决的部分是如何选择和更改每个导航项之间的分割管道字符的类。

你可以在这里看到它http://prosper.businesscatalyst.com/news.html我希望能够改变管道背景的颜色，以匹配制作一种颜色的实体块的管道字符。

这是我用来选择和更改菜单项的代码和html，但它是我能得到的。如果我可以选择菜单项，我想将class =“pipeBuffer”更改为class =“pipeBufferSelect”。

非常感谢任何帮助，谢谢。

    <ul id="subnavlist">
        <li class="pipeBuffer">|</li>
        <li><a href="about.html">About Us</a></li>
        <li class="pipeBuffer">|</li>
        <li><a href="finance-homeloans.html"> Finance </a> </li>
        <li class="pipeBuffer">|</li>
        <li><a href="life-insurance-private.html"> Life Insurance</a></li>
        <li class="pipeBuffer">|</li>
        <li><a href="general-insurance-private.html"> General Insurance</a></li>
        <li class="pipeBuffer">|</li>
        <li><a href="advisors.html"> Advisors</a> </li>
        <li class="pipeBuffer">|</li>
        <li><a href="news.html"> News</a> </li>
        <li class="pipeBuffer">|</li>
        <li><a href="#"> Resources</a> </li>
        <li class="pipeBuffer">|</li>
        <li><a href="#"> Contact</a> </li>
    </ul>

<script type="text/javascript">
    $(document).ready(function(){
        //this is highlighting a selected menu item
        $('#subnavlist li a  ').each(function(index) {
            if(this.href.trim() == window.location)
            $(this).addClass("selected");
            $(this).parent().parent().siblings(':first').addClass("selected");
        });       

    });
</script>

Answer 1

在jquery中使用click事件单击菜单项。

$(document).ready(function(){

        $('#subnavlist li a').click(function(event) {

            event.preventDefault();
            $('#subnavlist li a').removeClass("selected");
            $(this).addClass("selected");

            $('#subnavlist li').removeClass("pipeBufferSelect").addClass("pipeBuffer");
            $(this).closest("li").removeClass("pipeBuffer").addClass("pipeBufferSelect");

        });       

});

Answer 2

$(document).ready(function(){
     $('#subnavlist li a').click(function(){
       var checkClass = $(this).parent().next().attr('class').split(' ');
         alert(checkClass[1]);

         if(checkClass[1] == "pipeBufferSelect"){
             $(this).parent().next().removeClass('pipeBufferSelect');                                       
         }else
         {

        $(this).parent().next().addClass('pipeBufferSelect');
         }


    });
    //this is highlighting a selected menu item
    $('#subnavlist li a ').each(function(index) {
        if(this.href.trim() == window.location)
        $(this).addClass("selected");
        $(this).parent().parent().siblings(':first').addClass("selected");
    });       


});

尝试使用此代码，点击li即可添加“pipeBufferSelect”类。

在选择</li> <li> </li>时需要更改<li>的分类

2 个答案: