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

Question

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

我尝试通过默认显示与图像 1 关联的文本来实现这一点，为其他图像/文本提供 display: none; 并在用户点击图像时使用 更改它code>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

li 的 id 为 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 等，而是让所有 div 具有一个公共(public)类 test