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进行样式设置。

Answer 2

你可以做的几乎一样，只需使用基于data-rel的选择器来添加活动类并将活动类添加到按钮的data-rel语句中，就像总是切换匹配的标签一样很容易

function setContent($el) {
  var rel = $el.data('rel');
  $('.active').removeClass('active');
  $('.container').hide();
  $('[data-rel="' + rel + '"]').addClass('active');
  $(rel).show();
}

$(function() {
  // the right place to fire the initial setContent (all scripts are ready and page is loaded)
  setContent($('.button.active'));

  // add event handlers in ready event (DOM is most surely there)
  $('.button').click(function(e) {
    e.preventDefault();
    setContent($(this));
  });
});

.container {
  display: none;
}
.button.active {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>
  <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>

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

2 个答案: