javascript - 用于激活从一个 div 切换到另一个 div 的按钮

Question

如果这是一个简单的技巧，请提前道歉，但我不擅长 JavaScript，所以我不知道该怎么做......

我有两个按钮(蓝色和黄色)，可以在两个带有内容的 div 之间切换。在页面的另一部分，我还有另外两个按钮(也是蓝色和黄色)，它们应该激活这两个切换按钮的相同颜色的按钮。因此，蓝色将激活切换蓝色，黄色将激活切换黄色。我使用了在这里找到的以下脚本来实现切换功能:

<div class="flr-wrap">
    <ul>
        <li><a class="button active" data-rel="#content-a" href="#">a button</a>
        </li>
        <li><a class="button" data-rel="#content-b" href="#">b button</a>
        </li>
    </ul>
    <div class="flr-inner">
        <div class="container" id="content-a">AAA</div>
        <div class="container" id="content-b">BBB</div>
    </div>
</div>

// set content on click
$('.button').click(function (e) {
    e.preventDefault();
    setContent($(this));
});

// set content on load
$('.button.active').length && setContent($('.button.active'));

function setContent($el) {
    $('.button').removeClass('active');
    $('.container').hide();

    $el.addClass('active');
    $($el.data('rel')).show();
}

从这里开始: jsfiddle

我需要添加什么才能使其他两个按钮触发其相应切换按钮的事件状态？

非常感谢您的帮助!

Answer 1

既然您说您需要第二组按钮来触发第一组按钮的操作，这意味着按钮可以执行相同的操作。 以下是其工作原理的示例:

http://jsfiddle.net/ivanbatic/b43m405x/

Javascript:

$('.activator').on('click', function () {
    var target = $(this).attr('data-target');
    $('.panel').removeClass('active');
    $(target).toggleClass('active');
});

HTML

<section>
    <button class="activator" data-target=".panel-a">Blue</button>
    <button class="activator" data-target=".panel-b">Yellow</button>
<section>
    <div class="panel active panel-a">First Panel</div>
    <div class="panel panel-b">Second Panel</div>
</section>
<section>
    <button class="activator" data-target=".panel-a">Blue</button>
    <button class="activator" data-target=".panel-b">Yellow</button>
</section>

此外，您在示例中没有使用按钮，而是使用链接。链接旨在将您带到另一个页面，按钮旨在触发操作。 如果您希望按钮看起来像纯文本，请使用 CSS 进行样式设置。