很精致的网页选项卡切换网页特效,效果很好，很实用，希望大家能喜欢。
下面这个是纯div+css实现的选项卡样式，看演示效果：
<!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=gb2312" />
<title>div+css选项卡效果</title>
<style>
DIV {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.topic_nav_block_wrapper {
BORDER-BOTTOM: #BDB6AC 1px solid
}
.topic_nav_block {
FONT-SIZE: 14px; FLOAT: left; MARGIN-BOTTOM: -1px; WIDTH: 99%
}
.topic_nav_block LI {
FLOAT: left; MARGIN-RIGHT: 3px
}
.topic_nav_block A:link {
BORDER-RIGHT: #BDB6AC 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #BDB6AC 1px solid; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 4px; BORDER-LEFT: #BDB6AC 1px solid; COLOR: white; PADDING-TOP: 5px; BORDER-BOTTOM: #BDB6AC 1px solid; LETTER-SPACING: 1px; BACKGROUND-COLOR: #BDB6AC; TEXT-DECORATION: none
}
.topic_nav_block A:visited {
BORDER-RIGHT: #BDB6AC 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #BDB6AC 1px solid; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 4px; BORDER-LEFT: #BDB6AC 1px solid; COLOR: white; PADDING-TOP: 5px; BORDER-BOTTOM: #BDB6AC 1px solid; LETTER-SPACING: 1px; BACKGROUND-COLOR: #BDB6AC; TEXT-DECORATION: none
}
.topic_nav_block A:active {
BORDER-RIGHT: #BDB6AC 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #BDB6AC 1px solid; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 4px; BORDER-LEFT: #BDB6AC 1px solid; COLOR: white; PADDING-TOP: 5px; BORDER-BOTTOM: #BDB6AC 1px solid; LETTER-SPACING: 1px; BACKGROUND-COLOR: #BDB6AC; TEXT-DECORATION: none
}
.topic_nav_block A.current_nav:link {
PADDING-RIGHT: 10px; MARGIN-TOP: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; CURSOR: default; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: white 1px solid; LETTER-SPACING: 0px; BACKGROUND-COLOR: white
}
.topic_nav_block A.current_nav:visited {
PADDING-RIGHT: 10px; MARGIN-TOP: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; CURSOR: default; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: white 1px solid; LETTER-SPACING: 0px; BACKGROUND-COLOR: white
}
.topic_nav_block A.current_nav:active {
PADDING-RIGHT: 10px; MARGIN-TOP: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; CURSOR: default; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: white 1px solid; LETTER-SPACING: 0px; BACKGROUND-COLOR: white
}
.clear {
CLEAR: both
}
</style>
</head>
<body>
<DIV class=topic_nav_block_wrapper>
<UL class=topic_nav_block>
<LI><A onfocus="this.blur()" class="" href="http://www.jzxue.com/">建站学</A>
</LI>
<LI><A onfocus="this.blur()" class="" href="http://video.jzxue.com/">视频教程</A> </LI>
<LI><A onfocus="this.blur()" class=current_nav
href="http://book.jzxue.com/">书籍教程</A> </LI>
<LI><A class="" href="http://www.jzxue.com/special/">专题</A>
</LI></UL>
<DIV class=clear></DIV>
</DIV>
</body>
</html>
下面这款是点击切换的javascript选项卡效果，样式都和上面一样，只是在本页通过点击切换不同的内容，用javascript实现，看下面演示效果:
<!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=gb2312" />
<title>无标题文档</title>
<style>
body {}
DIV {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
h2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.topic_nav_block_wrapper {
BORDER-BOTTOM: #BDB6AC 1px solid; padding-top:5px; padding-left:10px;
}
.application_title {
PADDING-LEFT: 10px; FONT-SIZE: 16px; BACKGROUND: url(/images/ico_friend.gif) no-repeat left 4px; PADDING-BOTTOM: 10px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.topic_nav_block {
FONT-SIZE: 14px; FLOAT: left; MARGIN-BOTTOM: -1px; WIDTH: 99%
}
.topic_nav_block LI {
FLOAT: left; MARGIN-RIGHT: 3px
}
.topic_nav_block A:link {
BORDER-RIGHT: #BDB6AC 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #BDB6AC 1px solid; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 4px; BORDER-LEFT: #BDB6AC 1px solid; COLOR: white; PADDING-TOP: 5px; BORDER-BOTTOM: #BDB6AC 1px solid; LETTER-SPACING: 1px; BACKGROUND-COLOR: #BDB6AC; TEXT-DECORATION: none
}
.topic_nav_block A:visited {
BORDER-RIGHT: #BDB6AC 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #BDB6AC 1px solid; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 4px; BORDER-LEFT: #BDB6AC 1px solid; COLOR: white; PADDING-TOP: 5px; BORDER-BOTTOM: #BDB6AC 1px solid; LETTER-SPACING: 1px; BACKGROUND-COLOR: #BDB6AC; TEXT-DECORATION: none
}
.topic_nav_block A:active {
BORDER-RIGHT: #BDB6AC 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #BDB6AC 1px solid; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 4px; BORDER-LEFT: #BDB6AC 1px solid; COLOR: white; PADDING-TOP: 5px; BORDER-BOTTOM: #BDB6AC 1px solid; LETTER-SPACING: 1px; BACKGROUND-COLOR: #BDB6AC; TEXT-DECORATION: none
}
.topic_nav_block A.current_nav:link {
PADDING-RIGHT: 10px; MARGIN-TOP: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; CURSOR: default; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: white 1px solid; LETTER-SPACING: 0px; BACKGROUND-COLOR: white
}
.topic_nav_block A.current_nav:visited {
PADDING-RIGHT: 10px; MARGIN-TOP: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; CURSOR: default; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: white 1px solid; LETTER-SPACING: 0px; BACKGROUND-COLOR: white
}
.topic_nav_block A.current_nav:active {
PADDING-RIGHT: 10px; MARGIN-TOP: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; CURSOR: default; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: white 1px solid; LETTER-SPACING: 0px; BACKGROUND-COLOR: white
}
.clear {
CLEAR: both
}
#mainTables div{ display:none;}
</style>
<SCRIPT language=javascript>
function secBoard(n,url)
{
var leg=document.getElementById('myul').getElementsByTagName('a').length;
for(i=0;i<leg;i++)
document.getElementById('myul').getElementsByTagName('a')[i].className="";
document.getElementById('myul').getElementsByTagName('a')[n].className="current_nav";
var mainleg=document.getElementById('mainTables').getElementsByTagName('div').length;
for(i=0;i<mainleg;i++)
document.getElementById('mainTables').getElementsByTagName('div')[i].style.display="none";
document.getElementById('mainTables').getElementsByTagName('div')[n].style.display="block";
return false;
}
</SCRIPT>
</head>
<body>
<DIV class=topic_nav_block_wrapper>
<h2 class="application_title">开卡号：</h2>
<UL class=topic_nav_block id="myul">
<LI><A onfocus="this.blur()" class="current_nav" onclick='return secBoard(0)' href="">试用账号</A></LI>
<LI><A onfocus="this.blur()" class="" onclick='return secBoard(1)' href="">员工演示号</A> </LI>
<LI><A onfocus="this.blur()" class="" onclick='return secBoard(2)' href="">正式销售</A> </LI>
</LI></UL>
<DIV class=clear></DIV>
</DIV>
<div id="mainTables">
<div style="display:block">
<form>
</form>
</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
相关网页选项卡切换效果