将当前/活动状态添加到两个对象

时间:2012-02-24 21:34:28

标签: jquery javascript-events accordion

我正在尝试更改侧边栏中具有第二种导航形式的手风琴的活动状态来控制它。我有活动状态适用于手风琴和控制它的侧边栏按钮但是我希望手风琴的活动状态和对应它的按钮都可以在点击一个或另一个时应用当前状态。 ..这是当前的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 个答案:

答案 0 :(得分:1)

试试这个

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");
  });
});