Jquery показать / скрыть div - PullRequest
Новая
       22

Jquery показать / скрыть div

2 голосов
/ 08 января 2012

Имея html-структуру, подобную этой: 

<div id="newest">
    <nav>
        <ul id="newNav">
            <li><a href="#">Dani's Photos</a></li>
            <li><a href="#">Alex's Photos</a></li>
        </ul>
    </nav>
    <ul class="dani">
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        ...
    </ul>
    <ul class="alex">
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        ...
    </ul>
</div>

Фотографии Дэни соответствуют ul class = "dani" и фотографиям Алекса ul class = "alex" . Что мне нужно, так это показать только 1 мкл в то время, а показать / скрыть другой, когда нажимаешь на ссылки внутри, и показывать по умолчанию первый муль.

Есть идеи?

Ответы [ 3 ]

4 голосов
/ 08 января 2012

Изменить ваш HTML следующим образом: 

<div id="newest">
    <nav>
        <ul id="newNav">
            <li><a href="#dani">Dani's Photos</a></li>
            <li><a href="#alex">Alex's Photos</a></li>
        </ul>
    </nav>
    <ul id="dani" class="photos">
        <li>....Dani....</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
    </ul>
    <ul id="alex" class="photos">
        <li>....Alex....</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
    </ul>
</div>

Тогда в jQuery: 

$("#newNav A").on("click", function() {
    $(".photos").hide();
    var target = $(this).attr("href");
    $(target).show();
});

Пример скрипки

3 голосов
/ 08 января 2012 
$(function(){
     $(".alex").hide();
});
$("#dan").click(function()
{
   $(".alex").hide();
   $(".dani").show();

});
$("#alex").click(function()
{
    $(".dani").hide();
    $(".alex").show();
});

Вот образец: http://jsfiddle.net/yFDUB/4/

РЕДАКТИРОВАТЬ: В соответствии с вашим комментарием, вам нужно универсальное решение, которое работает для n чисел ULS Я обернул ULS в div с идентификатором "divItems", и я предполагаю, что имя класса div и id ссылок будут одинаковыми. 

$(function(){

    $("#divItems ul").hide();
    $("#divItems ul:first").show();
});

$("#newNav a").click(function()
{
  $("#divItems ul").hide();
  var className=$(this).attr("id"); 
  var objToShow=    $("."+className);  
  objToShow.fadeIn();  

});

Вот пример: http://jsfiddle.net/yFDUB/10/

2 голосов
/ 08 января 2012

Я бы сделал это так 

<div id="newest">
    <nav>
        <ul id="newNav">
            <li><a href="#" data-target="dani">Dani's Photos</a></li>
            <li><a href="#" data-target="alex">Alex's Photos</a></li>
        </ul>
    </nav>
    <ul class="dani">
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        ...
    </ul>
    <ul class="alex">
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        ...
    </ul>
</div>

и 

$(function(){
    $('#newNav a').click(function(){
      var selected = $(this).data('target');
      $('#newest > ul').hide().filter('.' + selected).show();
    }).first().click();
});

демо на http://jsfiddle.net/gaby/zkPcb/

...