html - 单击不同的 li 后显示不同的图像(作为第二个菜单)

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 lunch 时如何创建，它会显示图片 lunch。当点击 li diner 时，它显示图像 diner。

我做错了什么？

Answer 1

为此你需要 jQuery。使用这个或者为点击的元素 div 添加事件类。也最活跃的类是 display:block 或 display:inline-block；

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