jQuery的显示/隐藏的div

Question

有一个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类= “达尼”和Alex的照片UL类= “亚历克斯”。我需要的是只显示1 ul，并在显示/隐藏另一个时点击里面的链接，默认显示第一个ul。

任何想法？

Answer 1

我会做这样的

<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/

Answer 2

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

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

下面是示例：http://jsfiddle.net/yFDUB/4/

编辑：根据你的评论，你需要的工程ULS 的n个我包裹ULS在一个div id为“divItems一个通用的解决方案“我假设divs的类名和链接的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/

Answer 3

修改你的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(); 
}); 

Example Fiddle