您当前的位置: 首页 » JavaScript/JQuery编程 » jQuery 实现 tab 切换一例
jQuery 实现 tab 切换一例
论坛链接
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用而已。没什么可研究的；关健还在于怎样灵活运用。达到举一反三的效果；
先看下效果图；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tabs By Await http://leotheme.cn/</title>
<style>
* { margin:0 auto; padding:0; font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px; }
ul { list-style: none;}
p {width: 450px; border:1px solid #88AAD6; padding: 5px 10px; text-align: right;}
.tabbox{ position: relative; width:450px; height: 140px; margin:0 auto; border:1px solid #88AAD6; margin-top: 100px; padding: 10px;}
.tabnavi { position: relative; left: 0; top: 0; z-index: 999; float: left;}
.tabnavi li{ width:80px; height:24px; font-weight:bold; line-height: 24px; margin: 10px 0; border:1px solid #88AAD6; background:#eeeeff; color:#999; text-align:center;}
.tabnavi li.current{ background:#fff; border-right: 1px solid #fff; color:#290052; }
.tabContent{ position: relative; z-index: 99;float:left; margin-left: -1px; border:1px solid #88AAD6; padding:10px; width:347px; height:120px; }
.clear {clear: both;}
</style>
<script type="text/javascript" src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script>
<script>
$(function(){
$(".tabContent div:not(:first)").hide();
$(".tabnavi li").each(function(index){
$(this).click(
function(){
$(".tabnavi li.current").removeClass("current");
$(this).addClass("current");
$(".tabContent > div:visible").hide();
$(".tabContent div:eq(" + index + ")").show();
})
})
})
</script>
</head>
<body>
<div class="tabbox">
<ul class="tabnavi">
<li class="current">首页</li>
<li>关于</li>
<li>相册</li>
</ul>
<div class="tabContent">
<div>http://leotheme.cn/</div>
<div>http://leotheme.cn/about</div>
<div>http://leotheme.cn/photo</div>
</div>
<div class="clear"></div>
</div>
<p>By Await 2009:06:11</p>
</body>
</html>
先看下效果图；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tabs By Await http://leotheme.cn/</title>
<style>
* { margin:0 auto; padding:0; font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px; }
ul { list-style: none;}
p {width: 450px; border:1px solid #88AAD6; padding: 5px 10px; text-align: right;}
.tabbox{ position: relative; width:450px; height: 140px; margin:0 auto; border:1px solid #88AAD6; margin-top: 100px; padding: 10px;}
.tabnavi { position: relative; left: 0; top: 0; z-index: 999; float: left;}
.tabnavi li{ width:80px; height:24px; font-weight:bold; line-height: 24px; margin: 10px 0; border:1px solid #88AAD6; background:#eeeeff; color:#999; text-align:center;}
.tabnavi li.current{ background:#fff; border-right: 1px solid #fff; color:#290052; }
.tabContent{ position: relative; z-index: 99;float:left; margin-left: -1px; border:1px solid #88AAD6; padding:10px; width:347px; height:120px; }
.clear {clear: both;}
</style>
<script type="text/javascript" src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script>
<script>
$(function(){
$(".tabContent div:not(:first)").hide();
$(".tabnavi li").each(function(index){
$(this).click(
function(){
$(".tabnavi li.current").removeClass("current");
$(this).addClass("current");
$(".tabContent > div:visible").hide();
$(".tabContent div:eq(" + index + ")").show();
})
})
})
</script>
</head>
<body>
<div class="tabbox">
<ul class="tabnavi">
<li class="current">首页</li>
<li>关于</li>
<li>相册</li>
</ul>
<div class="tabContent">
<div>http://leotheme.cn/</div>
<div>http://leotheme.cn/about</div>
<div>http://leotheme.cn/photo</div>
</div>
<div class="clear"></div>
</div>
<p>By Await 2009:06:11</p>
</body>
</html>