2

div 内にネストされた一連のリンクがあります。これらのリンクのいずれかがクリックされると、クリックされたリンクで div を非表示にし、別の div を表示したいと思います。次に、その div 内でリンクがクリックされた場合、その div をさらに別の div に変更したいと思います。

html は次のようになります。

<div id="main">
    <div class="item"><a href="">Link to div A</a></div>
    <div class="item"><a href="">Link to div B</a></div>
    <div class="item"><a href="">Link to div C</a></div>
</div>

<div id="a" style="display:none;">Link to div <a href="">B</a> and <a href="">C</a></div>
<div id="b" style="display:none;">Link to div <a href="">A</a> and <a href="">C</a></div> 
<div id="c" style="display:none;">Link to div <a href="">A</a> and <a href="">B</a></div>

私はこれでjQueryに少しつまずいています。これをjQueryで動作させる方法について誰かアドバイスがありますか? div の表示/非表示は簡単に思えますが、div 内で再度行うと混乱します。

ありがとう！

4

1 に答える 1

2

これがまさにあなたが求めているものかどうかはわかりませんが、この jsFiddle をまとめて見てください。ここを参照してください。

どのアンカーがどの div に関連しているかを識別できるように、いくつかの変更を加えたので、HTML は次のようになります。

<div id="main">
    <div class="item"><a href="#" name="a">Link to div A</a></div>
    <div class="item"><a href="#" name="b">Link to div B</a></div>
    <div class="item"><a href="#" name="c">Link to div C</a></div>
</div>

<div class="item" id="a" style="display:none;">
    Link to div <a href="#" name="b">B</a> and <a href="#" name="c">C</a>
</div>
<div class="item" id="b" style="display:none;">
    Link to div <a href="#" name="a">A</a> and <a href="#" name="c">C</a>
</div>
<div class="item" id="c" style="display:none;">
    Link to div <a href="#" name="a">A</a> and <a href="#" name="b">B</a>
</div>

次に、jQuery を簡単に使用するだけで、説明したとおりに機能するようです。私が作成した jsFiddle を見て、それがあなたの求めているものかどうか教えてください。

$(document).ready(function() {

    // Hook up the first divs
    $(".item a").click(function() {

        // Get the target from the name of the anchor
        var targetDiv = $(this).attr("name");

        // Show the new div and hide the parent div
        $("#" + targetDiv).css("display", "");
        $(this).parents("div:last").css("display", "none");

    });

});
于 2010-07-06T19:43:51.443 に答える