当单击不同的li时,jQuery显示一个li
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();
});
相关文章:
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 在bootstrap中显示隐藏特定的li
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- 如何使用jquery显示具体的li数
- 使用jquery显示特定的li标记
- 自动完成搜索无法正常工作,请不要迭代$中的所有元素.每个ul-li都会及时显示响应
- 仅当我在 1 秒后将鼠标悬停在 li 上时,才会在悬停时显示弹出窗口
- 显示/隐藏具有不同类的li元素
- 当单击不同的li时,jQuery显示一个li
- 如何在JavaScript中突出显示li
- 显示与img最接近的li的JQuery Filter
- 隐藏/显示li's列表以及if语句和document.write
- ul li $(this).text() 什么也没显示
- 灯箱“下一个”功能仍然显示已隐藏的元素 (li) 显示:无;
- 使用鼠标悬停显示图像,图像位于 li-tag 之外
- 使用文本输入筛选 LI - 嵌套 LI 不显示
- 我有一个数据列表,我将其转换为 Ul 和 li 的列表,现在我希望这个列表在 JSP 中显示为树
- 在可点击的 LI 中仅显示第一个跨度的文本
- 如何在 LI 中强制 DIV(带有溢出隐藏样式)仍然显示
- 如何将li元素绑定到ng-repeat中的id,以便为不同的li显示不同的图像