Question

这是我的html作为页面中的第二个菜单。

<ul class="nav-tabs text-center" role="tablist">
         <li class="active"><a href="#breakfast" role="tab" data-toggle="tab">Lunch</a></li>
         <li class="diner"><a href="#lunch" role="tab" data-toggle="tab">Diner</a></li>
         <li class="pannenkoek"><a href="#dinner" role="tab" data-toggle="tab">Pannenkoek</a></li>
         <li class="borrel"><a href="#dessert" role="tab" data-toggle="tab">Borrel</a></li>

</ul>

现在，当我想点击一个li时，必须显示一个图像。当您单击第二个链接时，必须显示另一个图像。现在的问题是当我点击一个链接时，无论哪一个，它都显示所有div的页面上的图像。

 <div class="active"><img src="images/themenu/lunchkaart-november.jpg"    alt="lunchkaart" /> </div>


<div class="diner"><img src="images/themenu/dinerkaart-januari.jpg" alt="dinerkaart" /> </div>

点击李午餐时如何创建，它显示图像午餐。单击li diner时，它会显示图像用餐。

我做错了什么？

Answer 1

你需要jQuery。使用此或可能为单击的元素div添加活动类。最活跃的类是显示：块或显示：内联块;

<ul class="nav-tabs text-center" role="tablist">
         <li class="lunch"><a href="#breakfast" role="tab" data-toggle="tab">Lunch</a></li>
         <li class="diner"><a href="#lunch" role="tab" data-toggle="tab">Diner</a></li>
         <li class="pannenkoek"><a href="#dinner" role="tab" data-toggle="tab">Pannenkoek</a></li>
         <li class="borrel"><a href="#dessert" role="tab" data-toggle="tab">Borrel</a></li>

</ul>
<div class="content">

<div class="lunch" style="display:none"><img src="images/themenu/lunchkaart-november.jpg"    alt="lunchkaart" /> </div>


<div class="diner" style="display:none"><img src="images/themenu/dinerkaart-januari.jpg" alt="dinerkaart" /> </div>

</div>

jQuery(document).ready(function(){
    jQuery('.nav-tabs li').click(function(){
        var elementClass = jQuery(this).attr("class").toString();
        console.log(elementClass);
        jQuery('.content div').hide();
            jQuery('.'+elementClass,'.content').show();
    });
});

http://jsfiddle.net/e79g4p1p/14/

点击不同的li后显示不同的图像（作为第二个菜单）

1 个答案: