Показать/Скрыть функция с несколькими идентификаторы div


Я знаю почти ничего о jQuery, но я клянусь, что я пытаюсь узнать. Дело в том, что у меня есть некоторый код, который работает, но я знаю, что это тавтология и, наверное, не кошерно для реального программиста, который является, почему я обратился к вам всем.

То, что я хочу сделать, это показать/скрыть (или переключаться, то, что считаешь лучшим) некоторых информационных ДИВС, или так можно назвать их, на этой странице.

Показать/Скрыть код, который у меня сейчас стоит на этом:

    $(document).ready(function(){

    $('#meet_growlab, #buddy_tv').hide();

    $('a#growlab').click(function(){
    $('#meet_growlab').show('slow');
});

    $('a#growlab_close').click(function(){
    $('#meet_growlab').hide('slow');
})

    $('a#buddytv').click(function(){
    $('#buddy_tv').show('slow');
});

    $('a#buddytv_close').click(function(){
    $('#buddy_tv').hide('slow');
})


});

С HTML являются:

<div id="meet_growlab">BLAH BLAH BLAH
<p><a href="#" id="growlab_close">Close</a></p>
</div>

<div id="buddy_tv">BLAH BLAH BLAH
<p><a href="#" id="buddytv_close">Close</a></p>
</div>

<ul>
    <li><a href="#" id="growlab" rel="#meet_growlab">Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)</a></li>
    <li><a href="#" id="buddytv" rel="#buddy_tv">Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)</a></li>
</ul>

Это работает, но это не красиво.



18718
3
задан 25 октября 2011 в 07:10 Источник Поделиться
Комментарии
1 ответ


  1. Вы могли бы показать/скрыть ДИВС внутри контейнера, а затем на .готовы спрятать все свои непосредственные детей;

  2. Можно потом все это.закрыть внутри этого контейнера, и нажмите кнопку Скрыть нажатии якорь великий-прародитель;

  3. И, наконец, цели все якоря внутри элементов списка и нажмите кнопку Показать элемент div, соответствующий якорь отн;

  4. Я хотел бы также сделать якоря href, так же, как и ее рельеф, так что если пользователь отключит JavaScript якорь все еще работает.

Итак, HTML-код:

<div id="eventDescriptions">
<div id="meet_growlab">BLAH BLAH BLAH
<p><a href="#growlab" class="close">Close</a></p>
</div>
<div id="buddy_tv">BLAH BLAH BLAH
<p><a href="#buddytv" class="close">Close</a></p>
</div>
</div>
<ul id="eventTitles">
<li><a href="#" id="growlab" rel="#meet_growlab">Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)</a></li>
<li><a href="#" id="buddytv" rel="#buddy_tv">Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)</a></li>
</ul>

и более компактный и сухие на jQuery:

$(document).ready(function(){
$('#eventDescriptions>div').hide();
$('#eventTitles a').click(function(){
var target = $(this).attr("rel");
$(target).show('slow');
});

$('#eventDescriptions .close').click(function(){
$(this).parent().parent().hide('slow');
})
});

Здесь, в JSFiddle: http://jsfiddle.net/QYjLY/


Другие вещи, я быстро заметил:


  1. Хорошую работу с помощью атрибута rel;

  2. Вместо можно использовать CSS - это компания IMG { границы: 0;};

  3. #социальный список, так что это может быть ул вместо див.

2
ответ дан 25 октября 2011 в 09:10 Источник Поделиться