0

タブベースのレイアウトを作成しようとしています。垂直方向であれば機能しますが、水平にしたいと思います。タブがクリックされたときに、タブを展開したいのdivですが、これに問題があります。終了するための も追加しましたX。これは私のjsFiddleです。

<div id="header">
<div id="music"><a href="#">Music</a></div>             
<div id="about"><a href="#">About</a></div>
<div id="contact"><a href="#">Contact</a></div>
</div>

<div id="musicinfo">
<p>Music info div</p>
<p id='close'>x</p>
</div>

$("#music").click(function() {
$("#musicinfo").show();
$('#close').click(function() {
$("#musicinfo").hide();

});


});

私はフィドルにjqueryを追加しなかったので、それが機能しなかった理由ではありませんでした。この投稿はまだ人々を助けると思うので、質問を変更します。私が達成しようとしていることを行う方法について、より良いアイデアはありますか?

4

2 に答える 2

1

jQuery を使用しない、より簡単なソリューションを提案できますか? 必要がなくても、なぜ誰もがそれを使いたがるのか本当にわかりません...（あなたの質問は、タブの名前をクリックしたときにタブのコンテンツを表示する方法だと思います）

http://jsfiddle.net/EPDqR/

<div id="header">
<div id="music" onclick="getElementById('musicinfo').style.display='block';"><a href="#">Music</a></div>             
<div id="about"><a href="#">About</a></div>
<div id="contact"><a href="#">Contact</a></div>
</div>

<div id="musicinfo">
<p>Music info div</p>
<p id='close' onclick="getElementById('musicinfo').style.display='none';">x</p>
</div>
于 2013-08-03T20:38:04.973 に答える
1

jQueryをフィドルにインポートする必要があります

$("something")... // this is jQuery object

今では動作します: http://jsfiddle.net/FFjSk/23/

于 2013-08-03T20:38:17.337 に答える