css代码:
.nav li{float:left;display: block;padding: 20px;}
#tab{overflow:hidden;zoom:1;}
#tab li{float:left;display: block;padding: 20px;}
#tab li.cur{background:#ccc;}
#content{padding: 20px;background: #eee;}
#content ul{display: none;}
html代码:
<!-- nav导航 -->
<div class="nav">
<ul id="nav-a">
<li><a href="#tab-01">nav01</a></li>
<li><a href="#tab-02">nav02</a></li>
<li><a href="#tab-03">nav03</a></li>
</ul>
</div>
<!-- tab标签 -->
<div>
<ul id="tab">
<li class="cur"><a href="#tab-01">01</a></li>
<li><a href="#tab-02">02</a></li>
<li><a href="#tab-03">03</a></li>
</ul>
<div id="content">
<ul style="display:block;">
<a href="#">01</a>
</ul>
<ul>
<a href="#">02</a>
</ul>
<ul>
<a href="#">03</a>
</ul>
</div>
</div>
js代码:
$(function(){
var str = window.location.hash; //获取当前页面的url地址的锚部分(从#号开始的部分)
var idx = str.charAt(str.length - 1); //获取最后一个字符
$("#tab li").eq(idx-1).trigger("click"); //tab标签里相应位置出发点击事件
});
//点击tab标签
$("#tab li").click(function(){
$(this).addClass("cur").siblings().removeClass();
$("#content ul").eq($(this).index()).fadeIn(100).siblings().fadeOut(100);
});
//点击nav导航
$("#nav-a a").click(function(){
var str = this.hash;
var idx = str.charAt(str.length - 1);
$("#tab li").eq(idx-1).trigger("click");
});
…………END…………
谢谢支持,喜欢就点个❤
网友评论