Использование jQuery, чтобы показать / скрыть div, а затем показать / скрыть div в этом div - PullRequest
Новая
       15

Использование jQuery, чтобы показать / скрыть div, а затем показать / скрыть div в этом div

2 голосов
/ 06 июля 2010

У меня есть ряд ссылок, вложенных в 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 вызывает у меня замешательство.

Спасибо!

1 Ответ

2 голосов
/ 06 июля 2010

Не уверен, что это именно то, что вам нужно, но я собрал этот 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");

    });

});
...