用jquery实现三种网页标签(tab)完美滑动切换效果

显示效果：

代码如下：
<html>
<head>
<title>用jquery实现三种网页标签(tab)完美滑动切换效果</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script language=javascript type=text/javascript src="js/jquery.pack.js"></script>
<script language=javascript type=text/javascript src="js/jquery.tab.js"></script>
<style type="text/css">
a:link,a:visited,a:hover,a:active {
text-decoration: none;
}
dl,dt,dd,ul,li{
margin: 0px;
list-style-type: none;
}
.box1 {
background: #f2f7fb;
width: 200px;
height: 100px;
border: 1px solid #8bccfa;
}
.box1 dt {
padding-bottom: 0px;
padding-left: 5px;
padding-right: 0px;
display: block;
height: 30px;
padding-top: 6px;
background-image: url(images/boxbg1.gif);
background-repeat: no-repeat;
background-position: left 50%;
}
.box1 dt a {
text-align: center;
line-height: 24px;
display: block;
float: left;
height: 24px;
color: #724301;
font-size: 14px;
font-weight: bold
}
.box1 dt span {
float: left;
height: 24px;
margin-right: 5px
}
.box1 dt span a {
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
color: #fff;
padding-top: 0px
}
.box1 dt span.act {
background: url(images/tab_01.png) no-repeat right bottom
}
.box1 dt span.act a {
background: url(images/tab_02.gif) no-repeat left bottom;
color: #039;
}
.box1 dd {
padding: 5px;
}
.box2 {
background: url(images/boxbg2.png) repeat-x 50% top;
height: 100px;
width: 250px;
border: 1px solid #a9c5f3;
}
.box2 dt {
padding-bottom: 0px;
padding-left: 5px;
padding-right: 0px;
height: 30px;
padding-top: 4px
}
.box2 dt a {
text-align: center;
line-height: 21px;
width: 62px;
background: url(images/spline_1.gif) no-repeat right 50%;
float: left;
height: 21px;
color: #528ebe;
font-weight: bold
}
.box2 dt .act {
background: url(images/tab_03.gif) no-repeat center 50%;
color: #fff
}
.box2 dd {
padding: 5px;
}
.box3 {
background: url(images/boxbg3.gif) no-repeat 50% top;
height: 100px;
border: 1px solid #a9c5f3;
width: 300px;
}
.box3 dt {
border-bottom: #cadbe7 1px solid;
padding-bottom: 0px;
line-height: 23px;
padding-left: 5px;
padding-right: 0px;
display: block;
height: 30px;
padding-top: 5px
}
.box3 dt a {
text-align: center;
width: 74px;
display: block;
background: url(images/tab_04.gif) no-repeat;
float: left;
height: 23px;
color: #5f95c5;
font-weight: bold;
margin-right: 5px
}
.box3 dt a.act {
width: 74px;
background: url(images/tab_05.gif) no-repeat;
color: #fff;
font-weight: bold
}
.box3 dd {
padding: 5px;
}
.list {
margin: 0px;
padding: 0px;
font-size: 12px;
}
</style>
</head>
<body>

<div class="box1">
  <dl id="tab01">
<dt> <span class="act"><a>tab1</a></span> <span><a  href="#">tab2</a></span> <span><a  href="#">tab3</a></span> </dt>
<dd class="list">
   <ul>
      <li><a href="#">内容1</a></li>
   </ul>
</dd>
<dd  class="list" style="display: none">
   <ul>
      <li><a href="#">内容2</a></li>
   </ul>
</dd>
<dd  class="list" style="display: none">
   <ul>
      <li><a href="#">内容3</a></li>
   </ul>
</dd>
  </dl>
  <script type=text/javascript>
$("#tab01").tab({
tabs:">dt span",
evtype: "mouseover"
});
</script>
</div>
<br />

<div class="box2">
  <dl id="tab02">
<dt> <a class="act" href="#">tab1</a> <a href="#">tab2</a> <a href="#">tab3</a>
<dd class="list">
   <ul>
      <li><a  href="#">内容1</a></li>
   </ul>
</dd>
<dd class="list" style="display: none" >
   <ul>
      <li><a  href="#">内容2</a></li>
   </ul>
</dd>
<dd class="list" style="display: none">
   <ul>
      <li><a  href="#">内容3</a></li>
   </ul>
</dd>
  </dl>
  <script type=text/javascript>
$("#tab02").tab({
evtype: "mouseover"
});
      </script>
</div>
<br />

<div class="box3">
  <dl id=tab03>
<dt><a class="act" href="#">tab01</a> <a
  href="#">tab02</a>
  <a href="#">tab03</a> </dt>
<dd class="list">
   <ul>
      <li><a  href="#">内容1</a></li>
   </ul>
</dd>
<dd class="list" style="display: none">
   <ul>
      <li><a  href="#">内容2</a></li>
   </ul>
</dd>
<dd class="list" style="display: none">
   <ul>
      <li><a  href="#">内容3</a></li>
   </ul>
</dd>
  </dl>
  <script type=text/javascript>
$("#tab03").tab({
evtype: "mouseover"
});
</script>
</div>
</body>
</html>

下载地址：

用jquery实现三种网页标签(tab)完美滑动切换效果.rar (45.78 KB, 下载次数: 472)

灰儿 · 发表于 2013-2-24 21:27:54

jquery.tab.js代码如下：

(function(a){a.ui=a.ui||{};a.fn.tab=function(b){return this.each(function(){var c=a.extend({},b);if(c!==false){new a.ui.tab(this,c)}})};a.ui.tab=function(c,b){this.settings=a.extend({},a.ui.tab.settings,b);this.element=a(c);this.refresh();this.attachEvents()};a.ui.tab.prototype={refresh:function(){this.index=this.settings.index||0;if(this.index<0||this.index>this.element.find(this.settings.tabs).length-1){this.index=0}if(this.settings.cookies){this.index=a.cookie(this.settings.cookies)}this.tabs=this.element.find(this.settings.tabs);this.box=this.element.find(this.settings.box);this.tabs.removeClass(this.settings.cur).eq(this.index).addClass(this.settings.cur);this.box.hide().eq(this.index).show();if(this.settings.onSet){this.settings.onSet(this)}},attachEvents:function(){var b=this;this.tabs.each(function(c){var d=a(this);d.bind(b.settings.evtype,function(f){if(!d.hasClass(b.settings.cur)){b.index=c;if(b.settings.cookies){a.cookie(b.settings.cookies,b.index)}setTimeout(function(){b.tabs.removeClass(b.settings.cur).eq(c).addClass(b.settings.cur);b.box.hide().eq(c).show()},b.settings.delay);if(b.settings.onSelect){b.settings.onSelect(b)}f.stopPropagation();return false}})})}};a.extend(a.ui.tab,{settings:{delay:0,tabs:">dt a",index:0,cur:"act",evtype:"click",box:">dd",cookies:false,onSet:undefined,onSelect:undefined}})})(jQuery);

复制代码

灰儿 · 发表于 2013-2-24 21:30:37

jquery.pack.js文件也可用jquery.mini.js代替。