jQuery несколько div показывают скрытие только по одному за раз

Привет, и позвольте мне сначала объяснить, что я вообще не использовал jQuery. Простое отображение и скрытие и базовый пользовательский интерфейс — это предел. Итак, с учетом сказанного, я пытаюсь показать div, который на самом деле является «страницей», связанной со «ссылкой».

Разметка:

<body>
<!--Footer and Navigation Div's-->
<div id="bg"><img src="images/bg.jpg" alt=""></div>
    <div id="footer">
        <p>S.E. <span>yoga</span></p>
            <div id="nav">
                <ul><a href="#">Link 1</a></ul>
                <ul><a href="#">Link 2</a></ul>
                <ul><a href="#">Link 3</a></ul>
                <ul><a href="#">Link 4</a></ul>
            </div>
    </div>
<!--END Footer and Navigation Div's-->

<div class="parent">
<div class="a">
        <p>this is a</p>
    </div>   
   <div class="b">
        <p>this is b</p>
    </div>
    <div class="c">
        <p>this is c</p>
    </div>
    <div class="d">
        <p>this is d</p>
    </div>
</body>
</html>

jQuery:

 /*
 $(document).ready(function(){
 $('#nav').click(function(){
        $(".a").slideToggle();
  var divname= this.value;
          $("#"+divname).show("slow").siblings().hide("slow");

    });
});*/ 

    $(document).ready(function(){
    $('.a, .b, .c, .d').hide();
});;

Итак, первый сценарий (закомментированный), который я использовал, я собирался использовать в качестве отправной точки. Второй сценарий, где они все спрятаны, — это то, откуда я собирался пойти. Скройте их все, а затем покажите только по одному.

Дивы перекрываются. Любая помощь? Спасибо!


html hide jquery show overlapping
person user1572036    schedule 02.08.2012    source источник
comment
Вы хотите, чтобы они отображались автоматически один за другим или при возникновении события (например, клика)? Я думаю, что ваш вопрос не очень ясен.   -  person ecruz    schedule 02.08.2012
comment
Извини за это. Да, это будет нелинейно. Таким образом, если пользователь нажмет на ссылку 1, отобразится div для ссылки 1. Аналогичным образом, если пользователь щелкнет ссылку 4, то тот элемент div, который в данный момент является жизнеспособным, будет скрыт, а элемент div для ссылки 4 будет отображаться.   -  person user1572036    schedule 02.08.2012

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать это

 $(document).ready(function(){
         $('.parent  div').hide(); // hide div's on load using parent class as a starting point     
         $('#nav a').click(function() {  // on the anchor clicks that are inside div with id=nav
            var $div = $('.parent div').eq($(this).index('#nav a'));  // get the relevant div
            $div.show();  // show the relevant div
            $('.parent div').not($div).hide();  // hide all but the relevant div
        });​
    }):

РЕДАКТИРОВАТЬ:

$('.parent div') // ‹-- это получает все div под элементом с родительским классом

.eq(index) // получит элемент с заданным индексом, который выглядит следующим образом

$(this) // ‹-- Текущий нажатый тег привязки

.index('#nav a'); // ‹-- получить index() текущих тегов привязки по сравнению с другими тегами привязки

странно, я обычно использую $(this).index(), и это работает, но на этот раз это не так, поэтому мне пришлось указать селектор внутри индекса.

также исправьте свой html, чтобы он выглядел так

 <div id="nav">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</div>

Обновленная скрипка

http://jsfiddle.net/HpCWW/1/

person wirey00    schedule 02.08.2012
comment
Большое спасибо, но у меня не получается. Если не сложно, объясните, как $('.parent div').eq($(this).index('a')); работает? - person user1572036; 02.08.2012
comment
@ user1572036 Я обновил скрипку и ответил. Я не дал ему достаточно конкретного селектора для index(), что могло вызвать вашу проблему. Посмотрите, поможет ли вам новый код - person wirey00; 02.08.2012
comment
В порядке. Итак, я немного понимаю это сейчас. Я кодирую в actionscript, и есть команда трассировки, аналогичная команде предупреждения. Я хотел бы знать, могу ли я добавить предупреждение (вы нажали + $div (имя)); или это не возможно? - person user1572036; 02.08.2012
comment
Вы хотите предупредить, какой элемент div или якорь был нажат? Обработчик события клика не привязан к div. Но да, это возможно. Просто объясните, что именно вы хотите, чтобы произошло. - person wirey00; 02.08.2012
comment
По сути, я комментирую код построчно и смотрю, могу ли я понять процесс. Теперь я дошел до того, что вы нажимаете ссылку, и должен отображаться div, но часть показа закомментирована. Я просто хочу иметь возможность нажать кнопку, и появится предупреждение, сообщающее мне, какую кнопку нажать. ТАК извините, что рисую это. Думаю, я должен задать это в другом вопросе. Спасибо за вашу помощь!!!!! - person user1572036; 02.08.2012
comment
Извините, якорь это то, что я имел в виду - person user1572036; 02.08.2012
comment
внутри события клика вы можете просто добавить alert('you clicked ' + $(this).text()); Помните, что $(this) относится к элементу, вызвавшему событие.. тогда вы можете получить доступ к его тексту с помощью text() - person wirey00; 02.08.2012
comment
Прямо сейчас он просто говорит, что вы нажали [Объект объекта] - person user1572036; 02.08.2012
comment
Не за что .. также просто к сведению, что единственными допустимыми дочерними элементами <ul> являются <li>, что может вызвать у вас больше проблем. И если это ответило на ваш вопрос, не забудьте нажать на зеленую галочку. :) - person wirey00; 02.08.2012

arrow_upward
0
arrow_downward

Если вы хотите показывать только один div за раз, рассмотрите возможность использования jquery-аккордеона. http://jqueryui.com/demos/accordion/

person prashanth    schedule 02.08.2012
comment
На самом деле я иду не за этим. По сути, я пытаюсь добиться такого же эффекта, как здесь: wix.com/html-templates/html/web/ - person user1572036; 02.08.2012