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

效果如下：

代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>用jquery实现二种网页标签(tab)完美滑动切换效果</TITLE>
<SCRIPT language=javascript src="js/jquery.js"></SCRIPT>
<SCRIPT language=javascript src="js/site.js"></SCRIPT>
<style type="text/css">
LI {
LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none
}
UL {
LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none
}
.cnvp-tabs-hide {
DISPLAY: none
}
.NewsCA {
WIDTH: 380px; OVERFLOW: hidden; PADDING-TOP: 3px
}
.NewsCA .T {
LINE-HEIGHT: 28px; PADDING-LEFT: 15px; WIDTH: 365px; PADDING-RIGHT: 10px; BACKGROUND: url(images/caBg.png) repeat-x; HEIGHT: 26px; CLEAR: both; OVERFLOW: hidden
}
.NewsCA .T A {
TEXT-ALIGN: center; WIDTH: 103px; PADDING-RIGHT: 4px; DISPLAY: block; BACKGROUND: url(images/caOff.png) no-repeat; FLOAT: left; HEIGHT: 26px; COLOR: #fff; FONT-SIZE: 12px; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
.NewsCA .T A:hover {
BACKGROUND: url(images/caOn.png) no-repeat; TEXT-DECORATION: none
}
.NewsCA .T A.index_tabshover {
WIDTH: 103px; PADDING-RIGHT: 4px; DISPLAY: block; BACKGROUND: url(images/caOn.png) no-repeat; FLOAT: left; HEIGHT: 26px; COLOR: #0c590a; FONT-SIZE: 12px
}
.NewsCA .C {
WIDTH: 380px; HEIGHT: 100px; CLEAR: both; OVERFLOW: hidden
}
.NewsCA .C UL {
PADDING-LEFT: 3px; WIDTH: 375px; HEIGHT: 210px; OVERFLOW: hidden; PADDING-TOP: 6px
}
.NewsCA .C UL LI {
LINE-HEIGHT: 25px; PADDING-LEFT: 12px; WIDTH: 360px; BACKGROUND: url(images/icon1.png) no-repeat 1px 10px; FLOAT: left; HEIGHT: 25px; OVERFLOW: hidden
}
.NewsCA .C UL LI A {
WIDTH: 280px; TEXT-OVERFLOW: ellipsis; DISPLAY: block; WHITE-SPACE: nowrap; OVERFLOW: hidden; -o-text-overflow: ellipsis
}
.NewsCA2 {
PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; WIDTH: 960px; PADDING-RIGHT: 10px; BACKGROUND: url(images/ca2Bg.png) repeat-x 50% top; OVERFLOW: hidden; PADDING-TOP: 12px
}
.NewsCA2 .T {
LINE-HEIGHT: 31px; PADDING-LEFT: 15px; WIDTH: 945px; BACKGROUND: url(images/ca2Off.png) repeat-x; HEIGHT: 31px; OVERFLOW: hidden
}
.NewsCA2 .T A {
TEXT-ALIGN: center; WIDTH: 125px; PADDING-RIGHT: 10px; DISPLAY: block; FLOAT: left; HEIGHT: 31px; COLOR: #555; FONT-SIZE: 12px; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
.NewsCA2 .T A:hover {
BACKGROUND: url(images/ca2On.png) no-repeat; TEXT-DECORATION: none
}
.NewsCA2 .T A.index_tabshover {
WIDTH: 125px; PADDING-RIGHT: 10px; DISPLAY: block; BACKGROUND: url(images/ca2On.png) no-repeat; FLOAT: left; HEIGHT: 31px; COLOR: #0c590a; FONT-SIZE: 12px
}
.NewsCA2 .C {
BORDER-BOTTOM: #d1e1c8 1px solid; BORDER-LEFT: #d1e1c8 1px solid; WIDTH: 958px; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-TOP: 0px; BORDER-RIGHT: #d1e1c8 1px solid
}
.NewsCA2 .C UL {
PADDING-BOTTOM: 10px; PADDING-LEFT: 15px; WIDTH: 930px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 10px
}
.NewsCA2 .C UL LI {
LINE-HEIGHT: 25px; PADDING-LEFT: 10px; WIDTH: 145px; BACKGROUND: url(../images/LCEDUicon1.png) no-repeat 0px 10px; FLOAT: left; HEIGHT: 25px; OVERFLOW: hidden
}
.NewsCA2 .C UL LI A {
WIDTH: 140px; TEXT-OVERFLOW: ellipsis; DISPLAY: block; WHITE-SPACE: nowrap; OVERFLOW: hidden; -o-text-overflow: ellipsis
}
</style>
</HEAD>
<BODY>

<DIV class=NewsCA>
  <DIV class="cnvp-tab-nav T"><A class=index_tabshover
href="#">tab1</A><A
href="#">tab2</A><A
href="#">tab3</A></DIV>
  <DIV class="cnvp-tab-panle C">
<UL>
   <LI><A href="#" target=_blank>tab1列表内容1</A></LI>
   <LI><A href="#" target=_blank>tab1列表内容2</A></LI>
</UL>
  </DIV>
  <DIV class="cnvp-tab-panle cnvp-tabs-hide C">
<UL>
   <LI><A href="#" target=_blank>tab2列表内容1</A></LI>
   <LI><A href="#" target=_blank>tab2列表内容2</A></LI>
</UL>
  </DIV>
  <DIV class="cnvp-tab-panle cnvp-tabs-hide C">
<UL>
   <LI><A href="#" target=_blank>tab3列表内容1</A></LI>
   <LI><A href="#" target=_blank>tab3列表内容2</A></LI>
</UL>
  </DIV>
</DIV>

<DIV class=NewsCA2>
  <DIV class="cnvp-tab-nav T"> <A class=index_tabshover href="javascript:void(0);">111</A> <A href="javascript:void(0);">222</A> <A href="javascript:void(0);">333</A> </DIV>
  <DIV class="cnvp-tab-panle C">
<UL>
   <LI><A href="#" target=_blank>111</A></LI>
   <LI><A href="#"
  target=_blank>111</A></LI>
</UL>
  </DIV>
  <DIV class="cnvp-tab-panle cnvp-tabs-hide C">
<UL>
   <LI><A href="#" target=_blank>222</A></LI>
   <LI><A href="#" target=_blank>222</A></LI>
</UL>
  </DIV>
  <DIV class="cnvp-tab-panle cnvp-tabs-hide C">
<UL>
   <LI><A href="#" target=_blank>333</A></LI>
   <LI><A href="#" target=_blank>333</A></LI>
</UL>
  </DIV>
</DIV>
</BODY>
</HTML>

下载地址：

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

灰儿 · 发表于 2013-5-5 20:07:39

site.js代码如下：

// JavaScript Document
/// <reference path="jquery141min.js" />

$(function () {
// str = $("body").html();
// var reg=new RegExp("/JC_Data/|http:/JC_Data/","g"); //创建正则RegExp对象
//  $("body").html( str.replace(reg,"http://www.wucc.cn/JC_Data/"));
$(".cnvp-tab-nav>a").bind('mouseenter', function () {
      var tabs = $(this).parent().children("a");
      var selectedclass = getClass(tabs);
      var panels = $(this).parent().parent().children(".cnvp-tab-panle");
      var index = $.inArray(this, tabs);
      if (panels.eq(index)[0]) {
         $(tabs).removeClass(selectedclass)
   .eq(index).addClass(selectedclass);
         $(panels).addClass("cnvp-tabs-hide")
   .eq(index).removeClass("cnvp-tabs-hide");
      }
});
String.prototype.trim = function () {
      return this.replace(/(^\s*)|(\s*$)/g, "");
}
getClass = function (items) {
      currCls = null;
      items.each(function (i, item) {
         cls = $(item).attr('class');
         if (cls && !cls.trim() == '') {
            currCls = cls;
            return cls;
         }
      });
      return currCls;
};

$("input").bind("focus", function () {
  var v = $(this).val();
  var d = $(this).attr("data")
  if(d)
  if(v==d)
$(this).val('');
})
$("input").bind("blur", function () {
  var v = $(this).val();
  var d = $(this).attr("data")
  if(d)
  if(v=="")
$(this).val(d);
})
})

灰儿 · 发表于 2014-3-30 10:33:32

示例：
http://www.jsshedu.net.cn/