为什么我选择选项卡的 switch 语句不起作用？

Question

我正在尝试显示多张图片。单击时，应显示不同的文本。

我尝试通过默认显示与图像 1 关联的文本来执行此操作，为其他图像/文本提供 display: none; 并在用户单击图像时使用 switch 语句更改它。但是，我似乎遗漏了一些东西。我错过了什么？

相关 JavaScript：

    $(document).ready(function(){  
$("#list1 > li").click(function(e){  
    switch(e.target.id){  
        case "case1":  
            //change status & style menu  
            $("#nav1").addClass("active");  
            $("#nav2").removeClass("active");  
            $("#nav3").removeClass("active");  
            $("#nav4").removeClass("active");  
            //display selected division, hide others  
            $("div.test1").fadeIn();  
            $("div.test2").css("display", "none");  
            $("div.test3").css("display", "none");  
            $("div.test4").css("display", "none"); 
        break;  
        case "case2":  
            //change status & style menu  
            $("#nav1").removeClass("active");  
            $("#nav2").addClass("active");  
            $("#nav3").removeClass("active"); 
            $("#nav4").removeClass("active");   
            //display selected division, hide others  
            $("div.test2").fadeIn();  
            $("div.test1").css("display", "none");  
            $("div.test3").css("display", "none"); 
            $("div.test4").css("display", "none"); 
        break;  
        case "case3":  
            //change status & style menu  
            $("#nav1").removeClass("active");  
            $("#nav2").removeClass("active");  
            $("#nav3").addClass("active");  
            $("#nav4").removeClass("active");
            //display selected division, hide others  
            $("div.test3").fadeIn();  
            $("div.test1").css("display", "none");  
            $("div.test2").css("display", "none"); 
            $("div.test4").css("display", "none"); 
        break;  
        case "case4":  
            //change status & style menu  
            $("#nav1").removeClass("active");  
            $("#nav2").removeClass("active");  
            $("#nav4").addClass("active");  
            $("#nav3").removeClass("active");
            //display selected division, hide others  
            $("div.test3").fadeIn();  
            $("div.test1").css("display", "none");  
            $("div.test2").css("display", "none");  
            $("div.test4").css("display", "none");
        break;  
    }  
    //alert(e.target.id);  
    return false;  
});  
    }); 

相关 HTML：

        <div id="slider">
<ul id="list1">
    <li id="nav1" class="active"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
    <li id="nav2"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
    <li id="nav3"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
    <li id="nav4"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
</ul>

    <div class="test1">
    <h2>Test tab</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
        <p>labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
        <p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>
        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in </p>
        <p>culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="test2">
    <h2>Test tab2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
        <p>labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
        <p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>
        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in </p>
        <p>culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="test3">
    <h2>Test tab3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
        <p>labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
        <p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>
        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in </p>
        <p>culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>

Answer 1

您有lis 中的ids 为nav1、nav2 等。在开关情况下，您使用的是case1、case2 等。

改变它，事情应该开始工作了。

话虽如此，您的 jQuery 实在是太臃肿了。它被称为少写多做的 JS 库是有原因的，你知道的。 :-)

更新：（在jsBin 上这样做了一段时间。我知道@roxon 在一分钟前得到了完全相同的答案，但我会在此处发布以确保花的时间不是没用的）

$("#list1 > li").click(function(){  
  var index = $(this).index();
  $('.active').removeClass('active');
  $(this).addClass('active');

  $('.test').hide().eq(index).fadeIn();
  return false;
});

这将起作用，只需对 html 结构稍作改动。而不是将 div 类设置为 test1、test2 等，而是将所有 divs 与一个公共类 test

Answer 2

jsBin demo

这就是你所需要的：

$('#list1 li').eq( 0 ).addClass('active');
$('.test:gt(0)').hide();

$('#list1 li').click(function( e ){
  e.preventDefault();
  var myIndex = $(this).index();
  
  $(this).addClass('active').siblings('li').removeClass('active');
  $('.test').hide().eq( myIndex ).fadeTo( 400,1 );  
});

有这个 HTML 结构示例：

<div id="slider">
    <ul id="list1">
        <li></li>
        <li></li>    
        <li></li> <!-- if you click this one "myIndex" will be '2' -->
        <li></li>
    </ul>

    <div class="test"></div>   <!-- .eq(0) --> 
    <div class="test"></div>   <!-- .eq(1) -->
    <div class="test"></div>   <!-- this is $('.test').eq(myIndex) -->  
    <div class="test"></div>   <!-- .eq(3) -->
</div>

Answer 3

$(document).ready(function(){  
$("#list1 > li").click(function(e){  
switch(e.target.id){  
    case "nav1":  
        //change status & style menu  
        $("#nav1").addClass("active");  
        $("#nav2").removeClass("active");  
        $("#nav3").removeClass("active");  
        $("#nav4").removeClass("active");  
        //display selected division, hide others  
        $("div.test1").fadeIn();  
        $("div.test2").css("display", "none");  
        $("div.test3").css("display", "none");  
        $("div.test4").css("display", "none"); 
    break;  
    case "nav2":  
        //change status & style menu  
        $("#nav1").removeClass("active");  
        $("#nav2").addClass("active");  
        $("#nav3").removeClass("active"); 
        $("#nav4").removeClass("active");   
        //display selected division, hide others  
        $("div.test2").fadeIn();  
        $("div.test1").css("display", "none");  
        $("div.test3").css("display", "none"); 
        $("div.test4").css("display", "none"); 
    break;  
    case "nav3":  
        //change status & style menu  
        $("#nav1").removeClass("active");  
        $("#nav2").removeClass("active");  
        $("#nav3").addClass("active");  
        $("#nav4").removeClass("active");
        //display selected division, hide others  
        $("div.test3").fadeIn();  
        $("div.test1").css("display", "none");  
        $("div.test2").css("display", "none"); 
        $("div.test4").css("display", "none"); 
    break;  
    case "nav4":  
        //change status & style menu  
        $("#nav1").removeClass("active");  
        $("#nav2").removeClass("active");  
        $("#nav4").addClass("active");  
        $("#nav3").removeClass("active");
        //display selected division, hide others  
        $("div.test3").fadeIn();  
        $("div.test1").css("display", "none");  
        $("div.test2").css("display", "none");  
        $("div.test4").css("display", "none");
    break;  
}  
//alert(e.target.id);  
return false;  
});  
    });