[英]jQuery show an li when a different li is clicked
我有两个列表-第一个具有名称,较大的图像和描述,第二个具有较小的缩略图列表。 单击缩略图时,我需要带有较大图像和文本的相应li只显示。 因此,如果单击John Doe的缩略图,则需要显示较大的John Doe图像和文本,并确保隐藏较大的Bob Doe和Tom Doe图片和文本。 当页面加载时,我还想显示第一个较大的图像和说明。 到目前为止,这是我的HTML和jQuery-谢谢!
<div id="bios">
<ul>
<li>
<img src="../img/jd.jpg" alt="John Doe">
<br>
<span class = "name">John Doe</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p>
</li>
<li>
<img src="../img/bd.png" alt="Bob Doe">
<br>
<span class = "name">Bob Doe</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p>
</li>
<li>
<img src= "../img/td.png" alt="Tom Doe">
<br>
<span class = "name">Tom Doe</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p>
</li>
</ul>
</div>
<div id = "thumb">
<ul>
<li>
<img src="../img/jdthumb.png" alt="John Doe">
<br>
John Doe
</li>
<li>
<img src="../img/bdthumb.png" alt="Bob Doe">
<br>
Bob Doe
</li>
<li>
<img src= "../img/tdthumb.png" alt="Tom Doe">
<br>
Tom Doe
</li>
</ul>
</div>
jQuery的:
$("#bios li").first().css( "display", "block" );
$("#thumb li").on('click', function() {
$( "#bios li" ).css( "display", "block");
$(this).siblings('li').slideToggle();
});
$("#thumb li").click(function() {
var pos = $(this).index();
$("#bios li").hide();
$("#bios li").eq(pos).show();
$(this).siblings("li").slideToggle();
});
尝试这个:
CSS
#bios > ul > li{
display: none;
}
#bios > ul > li:first-child{
display: block;
}
JavaScript的
$(function(){
$('#thumb ul li').click(function(){
var index = $(this).index();
$('#bios ul li').hide();
$('#bios ul li').eq(index).show();
});
});
这是你的jsfiddle
只要您愿意始终在缩略图和图像之间保持一对一的对应关系,并使其保持相同的标记顺序,Barmar的答案就很好。 如果没有,我建议您配对ID,例如,
<li id="img-john"> <!-- or use `img-1`, `img-2`, etc. -->
<img src="../img/jd.jpg" alt="John Doe">
<!-- ... -->
</li>
<li id="img-bob">
<img src="../img/bd.jpg" alt="Bob Doe">
<!-- ... -->
</li> <!- ... -->
<!-- ... -->
<li id="thumb-john">
<img src="../img/jdthumb.jpg" alt="John Doe">
<!-- ... -->
</li>
<li id="thumb-bob">
<img src="../img/bdthumb.jpg" alt="Bob Doe">
<!-- ... -->
</li> <!- ... -->
然后,您可以执行以下操作(未经测试):
$("#thumb li").click(function() {
var id = this.id.replace("img", "thumb");
$("#bios li").hide();
$("#" + id).show();
$(this).siblings("li").slideToggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.