Question

我正在使用最新版本的Bootstrap，我想使用javascript单选按钮在两张图片之间切换。

我有两张图片，比如Image1和Image2。在下面我想使用一个带有两个选项的单选按钮; “显示Image1”和“显示Image2”。 Image1应显示为默认值。当我按下“显示图像2”时，Image1应该消失并被Image2替换，如果我之后再按“显示图像1”，则应再次显示Image1。

外观应该是这样的： http://i.solidfiles.net/246a3403cb.png

是否可以使用html / css / js执行此操作？我真的很感激，如果有人可以制作一个JS小提琴，并解释如何以最好的方式做到这一点。使用css / html hack并不是一个很好的方法......

Twitter Bootstrap Radio Button（向下滚动到“广播”）

Answer 1

以下是jsfiddle

标记图像，然后隐藏第二个图像。添加电台btn-group from your link

<div>
    <img src="http://www.google.com/images/icons/product/chrome-32.png" title="image 1" alt="image 1" id="image1" class="image-toggle" />
    <img src="http://www.google.com/images/icons/product/search-32.png" title="image 2" alt="image 2" id="image2" class="image-toggle" style="display:none;" />
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary image-toggler" data-image-id="#image1">
    <input type="radio" name="options" id="option1"> Show Image 1
  </label>
  <label class="btn btn-primary image-toggler" data-image-id="#image2">
    <input type="radio" name="options" id="option2"> Show Image 2
  </label>
</div>

包含您的js后，添加此

<script>
    $('.image-toggler').click(function(){
        $('.image-toggle').hide();
        $($(this).attr('data-image-id')).show();
    })
</script>

Answer 2

由于您使用的是Bootstrap，我建议您尝试使用Bootstrap Carousel进行此操作。

见这里： http://getbootstrap.com/javascript/#carousel

你可以看到

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>

data-slide属性可用于锚点，并且它们链接到data-target，请参阅Bootstrap示例。这可能会对Bootstrap单选按钮有所帮助，顺便说一下它们只是html单选按钮..但是由于它需要链接到图像我的赌注是你必须自己调用它。

我建议你使用jQuery和Bootstrap Carousel方法

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

手动点击单选按钮..我会让你尝试一下。

如果您正在寻找另一种方法，那么有很多教程可用于构建图像切换器，但在您的情况下，您希望它能够手动工作。

尝试其中一些网站，以帮助您入门：http://designm.ag/tutorials/21-best-websites-for-teaching-yourself-web-development/

单击Bootstrap JS单选按钮更改图像

2 个答案: