<!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到代码编辑器内，提交，查看演示效果
