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

【问题标题】：show different images after click on different li (as a second menu)单击不同的 li 后显示不同的图像（作为第二个菜单）
【发布时间】：2015-04-23 21:08:59
【问题描述】：

这是我的 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。

我做错了什么？

【问题讨论】：

你能在这里写并显示整个代码吗jsfiddle.net
jsfiddle.net/zghc56xg
图片应该在哪里？
jsfiddle.net/zghc56xg/1

标签： html css class html-lists

【解决方案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/

【讨论】：