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

.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