0
私はこのコードをここではブートストラップを使って実装しています。ここではHTMLです:クリックブートストラップに基づいてテキストを変更する
<div class="map-images">
<img src="images/map/level0.png" title="image 1" alt="Ground floor" id="image1" class="image-toggle"/>
<img src="images/map/level1.png" title="image 2" alt="floor 1" id="image2" class="image-toggle" style="display:none;"/>
<img src="images/map/level2.png" title="image 3" alt="floor 2" id="image3" class="image-toggle" style="display:none;"/>
<img src="images/map/level3.png" title="image 4" alt="floor 3" id="image4" 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" data-link="first">
<input type="radio" name="options" id="option1" href="#lvl0-overview"> Ground Floor
</label>
<label class="btn btn-primary image-toggler" data-image-id="#image2" data-link="second">
<input type="radio" name="options" id="option2" href="#lvl1-overview"> Floor 1
</label>
<label class="btn btn-primary image-toggler" data-image-id="#image3" data-link="third">
<input type="radio" name="options" id="option3" href="#lvl2-overview"> Floor 2
</label>
<label class="btn btn-primary image-toggler" data-image-id="#image4" data-link="fourth">
<input type="radio" name="options" id="option4" href="#lvl3-overview"> Floor 3
</label>
</div>
これは、上記のコードのためのJavaScriptです:
である基本的には何をするか、選択するために、ボタンのクリックに基づいて示す画像を変更<script type="text/javascript">
$('.image-toggler').click(function(){
$('.image-toggle').hide();
$($(this).attr('data-image-id')).show();
});
</script>
ユーザはフロアマップを見ることができる。 私がしたいのは、ボタンの下にフロアの説明を生成するonclickオプションを追加することです。私は自分のコードに追加する必要があり、より何この
-------------
| Floor |
| overview | <-image swapping here based on button click
| |
| |
-------------
button1 button2 button3
--------------
| floor |
| description | <-Change divs based on the current floor.
| |
| |
--------------
よう
何か?私は簡単なCSSを使用してそれを実装しようとしましたが、this投稿にあるアドバイスを実装しています。そこで、<input>
要素にhref
タグを追加し、後でdivにリンクしました。しかし、私はそれを働かせることはできません。私は何が欠けていますか?
画像の表示に使用したのとまったく同じ方法を使用してみませんか? – Turnip
@TurnipあなたはJscriptにフィードするピクチャIDが必要だが、1つのピクチャに対して2 IDを持つことはできないので、これを行うことはできません。私は、少なくとも... – Jack
私の意図は、あなたのラベルに別のデータ属性を追加することでした: 'data-description-id'おそらく - これは表示したいdescription要素のIDを保持します。次に、このIDを、イメージの非表示/表示と同じ方法で使用します。 – Turnip