Question

我正在尝试显示多张图片。点击后，应显示不同的文字。

我尝试通过将与图片1相关联的文字显示为默认值，将其他图片/文字设为display: none;并在用户使用switch语句点击图片时更改该图片/文本。但是，我似乎错过了一些东西。我错过了什么？

相关JavaScript：

    $(document).ready(function(){  
$("#list1 > li").click(function(e){  
    switch(e.target.id){  
        case "case1":  
            //change status &amp;amp;amp; 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 &amp;amp;amp; 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 &amp;amp;amp; 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 &amp;amp;amp; 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

您id的{{1}}为li，nav1等。在切换案例中，您使用的是nav2，{{ 1}}等等。

改变这一点，事情就应该开始了。

话虽如此，你的jQuery非常臃肿。你知道，它被称为写少，做更多的JS库是有原因的。： - ）

更新 :(我已经在这jsBin上做了一段时间了。我知道@roxon在一分钟后得到完全相同的答案，但我会在这里发布以便制作确保花费的时间并非毫无用处。）

case1

这将起作用，对html结构进行一些小改动。而不是将div类设为case2，$("#list1 > li").click(function(){ var index = $(this).index(); $('.active').removeClass('active'); $(this).addClass('active'); $('.test').hide().eq(index).fadeIn(); return false; });等，只需拥有公共类test1的所有test2

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 &amp;amp;amp; 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 &amp;amp;amp; 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 &amp;amp;amp; 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 &amp;amp;amp; 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;  
});  
    });

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

3 个答案:

jsBin demo