1

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

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代码正在触发页面中的所有按钮，应该只是两个按钮

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

4

1 回答 1

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

演示：小提琴

于 2013-10-08T13:07:08.673 回答