2

Bootstrap の最新バージョンを使用しており、javascript ラジオ ボタンを使用して 2 つの画像を切り替えたいと考えています。

Image1 と Image2 としましょう。その下で、2 つのオプションを持つラジオ ボタンを使用します。「画像1を表示」と「画像2を表示」。Image1 がデフォルトで表示されます。「Show Image2」を押すと Image1 が消えて Image2 に置き換わるはずですが、その後「Show Image1」を押すと Image1 が再び表示されます。

外観は次のようになります: http://i.solidfiles.net/246a3403cb.png

html/css/jsでこれを行うことは可能ですか? 誰かが JS Fiddle を作成し、これを最善の方法で行う方法を説明していただければ幸いです。css/html ハックを使用することは、これを行う良い方法とは思えません...

Twitter ブートストラップ ラジオ ボタン(「ラジオ」まで下にスクロール)

4

2 に答える 2

7

ここにjsfiddleがあります

画像をマークアップし、2 番目を非表示にします。リンクからラジオを追加する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アンカーにリンクしdata-targetます。ブートストラップの例を参照してください。これは、Bootstrap のラジオ ボタンで何らかの方法で機能する可能性があります。ちなみに、それらは単なる html のラジオ ボタンです。ただし、画像にリンクする必要があるため、自分で呼び出す必要があると思います。

jQuery と Bootstrap Carousel メソッドを使用することをお勧めします

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

ラジオボタンをクリックして手動で..それを試してみましょう。

別のアプローチを探している場合は、画像スイッチャーを構築するためのチュートリアルがたくさんありますが、あなたの場合は手動で動作させたい.

次の Web サイトのいくつかを試してみてください: http://designm.ag/tutorials/21-best-websites-for-teaching-yourself-web-development/

于 2013-08-02T18:57:22.530 に答える