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