这是我的 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。
我做错了什么?
最佳答案
为此你需要 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();
});
});
关于html - 单击不同的 li 后显示不同的图像(作为第二个菜单),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28658614/