2

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

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

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

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

Twitter Bootstrap 单选按钮（向下滚动到“收音机”）

4

2 回答 2

7

这是jsfiddle

标记图像，并隐藏第二个。从您的链接添加收音机btn-group 

<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>
于 2013-08-02T19:06:36.977 回答
1

由于您使用的是 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属性可用于锚点，它们链接到 a 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/

于 2013-08-02T18:57:22.530 回答