javascript - 使用两个不同的按钮切换两个 div(一个处于事件状态)

Question

请记住，我已经搜索过并且有超过 400 个关于切换 div 的搜索结果，但没有一个能解释我需要什么。我的 jquery 真的很差，我真的很难利用一些已经回答的切换问题来做我想做的事。

我有两个按钮，“按钮 a”和“按钮 b”，按钮“a”以 .active 类开头。我在需要切换的单独包装器中还有两个 div。所以默认情况下按钮“a”是事件的，它下面的 div“a”是事件的。当您单击按钮“b”时，按钮“a”不再处于事件状态，按钮“b”及其下方的 div“b”现在处于事件状态。

这是我当前的 html:

HTML:

<div class="flr-wrap">
  <ul>
    <li><a class="a">a button</a></li>
    <li><a class="b">b button</a></li>
  </ul>
  <div class="flr-inner">
    <div class="a div">
      <img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" />   
    </div>
    <div class="b div">
      <img src="<?php echo get_bloginfo('template_url') ?>/img/floorplan/base.png" alt="" title="" />   
    </div>
  </div>
</div>

Answer 1

首先在按钮和div 上设置一些通用类。然后你可以使用 data-* 属性来相互关联。像这样:

<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>

然后在javascript中你可以根据按钮和容器之间的关系显示/隐藏:

// 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();
}

Example fiddle

这样做的好处是它适用于点击和加载，并且可以扩展为 N 个按钮。