实现同一页面点击导航下边内容直接替换

.t1{color: #ff55aa;padding:10px;}.t1 .t2{font-size: 16px;width: 300px;float: left;text-align: center;}.car{border: 1px solid #36d824;width: 200px;}.t4{height: 500px;background: red;width: 500px;}.t5{height: 500px;background: yellow;display: none;width: 500px;}.clearfix{display: table;content: "";zoom:1;}

JQuery实现

写一个小例子

同级之间的显示控制

<script type="text/javascript">$(".iconfont").hover(function() {$(this).next().show();     },function() {$(this).next().hide();})</script>

选中子级返回父级选中父级元素控制

<script type="text/javascript">$("#tt a").click(function() {$(this).parent().addClass("cur").siblings().removeClass("cur");var index = $(this).parent().index();$("#showcontent>div").hide();$("#showcontent>div").eq(index).show();})</script>

下边是一个完整的例子

<script type="text/javascript">$("#aa li").click(function() {$("#aa li").siblings().removeClass("car");$(this).addClass("car");alert("ii")var index =  $(this).index();$("#bb div").hide();$("#bb div").eq(index).show();})</script>
html部分

<div class="t1 clearfix" id="aa"><ul><li class="t2 car">我显示你退出</li><li class="t2">你退出我显示</li></ul></div><div class="t3 clearfix" id ="bb"> <div class="t4" >我显示</div>  <div class ="t5">你退出我显示</div></div>

CSS