Блог

Главная - Вопросы по программированию - Необходимо изменить класс деления при выборе

Необходимо изменить класс деления при выборе

#jquery #css

#jquery #css

Вопрос:

Мне удалось заставить навигацию изменить свой класс, если он был выбран, но часть, которую я не могу понять, заключается в том, как выбрать и изменить класс разделительного символа канала между каждым элементом навигации.

Вы можете увидеть это здесь 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>

Комментарии:

1. Работает ли это? $(this).ближайший (li).братья и сестры (‘:первый’).addClass(«выбранный»);

2. вы имеете в виду $(this).parent().next("li") amp; $(this).parent().prev("li")

3. Вы хотите $(this).closest('li').prev('li').addClass("pipeBufferSelect").removeClass("pipeBuffer"); ?

4. Это почти работает, за исключением того, что добавляет класс ко всем классам pipeBuffer — спасибо.

5. vasa — нет, это не так, но все равно спасибо за ваше внимание — цените это!

Ответ №1:

Используйте событие щелчка в jquery, чтобы щелкнуть пункт меню .

 $(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");

        });       

});

Ответ №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");
    });       


});

Попробуйте этот код, он добавит класс «pipeBufferSelect» при нажатии кнопки li.