用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>
下载地址：
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)) {
$(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);
})
})
示例：
http://www.jsshedu.net.cn/
页:
[1]