Question

我正在尝试对此代码进行一些小调整：

HTML

<div class="btn-group" data-toggle="buttons">
  <button type="button" title="left" class="btn btn-info active">left</button>
  <button type="button" title="right" class="btn btn-info">right</button>
</div>
<div class="btn-group" data-toggle="buttons">
  <button type="button" title="a" class="btn btn-info">dont toggle</button>
  <button type="button" title="b" class="btn btn-info">another function</button>
</div>
<div id="left"> LEFT CONTENT </div>
<div id="right"> RIGHT CONTENT </div>

JAVASCRIPT

$('.btn-group button').click(function(){
    var ix = $(this).index();

    $('#left').toggle( ix === 0 );
    $('#right').toggle( ix === 1 );
});

CSS

#right { display:none; }

http://jsfiddle.net/Nz964/

“有效”按钮不起作用。我该怎么做才能切换两个按钮之间的“活动”？
javascript代码触发了页面中的所有按钮，应该只是两个按钮

任何帮助都会很棒。感谢。

Answer 1

第一个问题，你正在使用一个非常旧版本的jQuery（1.5） - bootstrap使用.on（）方法，它是在jQuery 1.7版本中添加的，因此你需要将jQuery升级到1.7或更高版本

第二个问题，你需要缩小你的选择器我添加另一个类

<div class="btn-group mytoggle" data-toggle="buttons">
    <button type="button" title="left" class="btn btn-info active">left</button>
    <button type="button" title="right" class="btn btn-info">right</button>
</div>

然后

$('.mytoggle button').click(function(){
    var ix = $(this).index();

    $('#left').toggle( ix === 0 );
    $('#right').toggle( ix === 1 );
});

演示：Fiddle

在Bootstrap 3中切换DIV

1 个答案: