内容介绍
选项卡导航是你经常遇见浏览网页中的元素。有很多方面，很多样式，但这个想法是相同的:你单击某个选项卡，看其内容而无需页面刷新。 在本文中，您将学习如何建立一些新的 CSS3 和 jQuery 选项卡由谷歌播放设计的启发，B5教程网推荐下载！B5教程网，站长必备js网页特效及js广告代码，提供高质量js特效下载。
核心代码：
<script src="js/jquery-1.7.2.min.js"></script>
<script>
function resetTabs(){
$("#content > div").hide(); //Hide all content
$("#tabs a").attr("id",""); //Reset id's
}
var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
(function(){
$("#content > div").hide(); // Initially hide all content
$("#tabs li:first a").attr("id","current"); // Activate first tab
$("#content > div:first").fadeIn(); // Show first tab content
$("#tabs a").on("click",function(e) {
e.preventDefault();
if ($(this).attr("id") == "current"){ //detection for current tab
return
}
else{
resetTabs();
$(this).attr("id","current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
$(myUrlTab).fadeIn(); // Show url tab content
}
}
})()
</script>
