您的位置：首页 > Web前端 > JQuery

jQuery 找dt.next(div).html()的解决方法

2017-09-28 16:39 387 查看

<!DOCTYPE html>
<html>
<head>
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
.none{display:none;}
</style>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("dt").click(function(){
var index=$("dl dt").index(this);//查找dt，在当前目录中dt的索引

$(this).parent().find("div:eq("+index+")").show().siblings("div").hide();//显示dt同级的div，隐藏div其它兄弟节点
});

});
</script>
</head>
<body class="siblings">

<dl>
<dt>h2 1</dt>
<div class="none"><dd>我是div1-dd</dd></div>
<dt>h2 2</dt>
<div class="none"><dd>我是div2-dd</dd></div>
<dt>h2 3</dt>
<div class="none"><dd>我是div3-dd</dd></div>
</dl>

</body>
</html>

在线测试把代码copy到代码编辑器内，提交，查看演示效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航