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>

Dani的照片对应 ul class =“dani”和Alex的照片 ul class =“alex”。我需要的是当时只显示1个ul，并在点击里面的链接时显示/隐藏另一个，并默认显示第一个ul。

有什么想法吗？

Answer 1

像这样修改你的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

Answer 2

$(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包装在一个id为“divItems”的div中，我假设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/

Answer 3

我会这样做

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

Jquery显示/隐藏div

3 个答案: