Добавить текущее / активное состояние к двум объектам - PullRequest
Новая
       3

Добавить текущее / активное состояние к двум объектам

0 голосов
/ 25 февраля 2012

Я пытаюсь изменить активное состояние аккордеона, у которого есть вторая форма навигации в боковой панели, чтобы управлять им. У меня есть активные состояния, работающие как для кнопок аккордеона, так и для кнопок боковой панели, которые управляют им, но я хочу, чтобы активное состояние для аккордеона и кнопки, соответствующей ему, применяли текущее состояние при нажатии одной или другой кнопки. .. Вот текущий код JS для этого: 

jQuery(function($){
  var headerAnchors = $('.btn a').click(function(){
    headerAnchors.removeClass('current');
    $(this).addClass('current');
  });
});

jQuery(function($){
  var headerAnchors = $('.accordion h2 a').click(function(){
    headerAnchors.removeClass('current');
    $(this).addClass('current');
  });
});

и соответствующий html: 

<div class="accordion">
    <section id="item1">
        <h2><a href="#item1">Item 1 Title</a></h2>
        <div>
            <p>Item 1 content</p>
        </div>
    </section>
    <section id="item2">
        <h2><a href="#accordion2">Item 2 Title</a></h2>
        <div>
            <p>Item 2 content</p>
        </div>
    </section>
</div>

<div id="sidebar-nav">
    <ul>
        <li class="btn"><a href="#item1"><img src="button1.jpg" /></a></li>
        <li class="btn"><a href="#item2"><img src="button2.jpg" /></a></li>
    </ul>
</div>

Вот одна из рассматриваемых страниц, чтобы вы могли лучше видеть, чего я пытаюсь достичь: http://64.82.220.37/CreativeCompounds/exclusive-ingredients.php

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

Заранее спасибо!

1 Ответ

1 голос
/ 25 февраля 2012

Попробуйте это 

jQuery(function($){
  var headerAnchors = $('.btn a, .accordion h2 a').on('click', function() {
    $('.current').removeClass('current');
    var anchorID = $(this).attr('href');
    $('a[href="'+anchorID+'"]').addClass("current");
  });
});
...