上一篇
下一篇
兼容IE6,IE7,Firefox,Opera,仿雅虎选项卡
作者:admin 日期:2008-07-12
预览地址:
http://www.54ny.com.cn//download/yahoo.htm
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>仿雅虎选项卡</title>
<style type="text/css">
*{padding:0; margin:0; list-style:none;}
img{border:0;}
body{font:12px "宋体";}
a:link{color:#036;text-decoration:none;}
a:visited{color:#369;text-decoration:none;}
a:hover{color:#c30;text-decoration:underline;}
/*选项卡1*/
.Tab1{width:600px; margin:0 auto; border:solid 1px #A5B5C0;}
/*选项卡2*/
.Tab2{width:600px; margin:0 auto; border:solid 1px #A5B5C0;}
/*菜单class*/
.tabbox{height:22px; line-height:22px; text-align:center; border-bottom:solid 1px #A5B5C0; background:url(http://hiphotos.baidu.com/kaka%5Fcat/pic/item/a9015e30ec4ee696a9018ed7.jpg); position:relative;}
.tabbox a:hover{text-decoration:underline;}
.tabbox ul{height:23px; position:absolute; left:0;}
.tabbox li{float:left; display:block; width:50px; height:22px; border-right:solid 1px #A5B5C0; font-weight:bolder; color:#036; cursor:pointer;}
.tabbox li a:link,
.tabbox li a:visited{color:#036; text-decoration:none;}
.tabbox li.hover{height:23px; line-height:23px; background:url(http://hiphotos.baidu.com/kaka%5Fcat/pic/item/a9015e30ec4ee696a9018ed7.jpg) 0 -22px #FFF; color:#C30;}
.tabbox li.hover a:link,
.tabbox li.hover a:visited{color:#C30; text-decoration:none;}
.tabbox li.hover a:hover{text-decoration:underline;}
.tabbox .sort{position:absolute; left:0; width:80px; font-weight:bolder; font-size:14px; background:#879CAB; color:#FFF;}/*左侧的链接*/
.tabbox .r_link{position:absolute; right:0; padding-right:10px;}/*右侧的链接*/
.tabbox .r_link a{padding-left:6px; margin-left:7px; background:url(http://hiphotos.baidu.com/kaka%5Fcat/pic/item/1633714e846fcbc5d1c86add.jpg) no-repeat 0 4px;}
.Contentbox{clear:both; height:180px; padding:8px; text-align:left;}
</style>
</head>
<body>
<br><br><br><br>
<div class="Tab1">
<div class="tabbox">
<ul>
<li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li>
<li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
<li id="one3" onclick="setTab('one',3,4)">新闻3</li>
<li id="one4" onclick="setTab('one',4,4)">新闻4</li>
</ul>
<div class="r_link"><a href="#">链接</a><a href="#">全部</a></div>
</div>
<div class="Contentbox">
<div id="one_1" ><h1>鼠标<font color="#CC3300">点击</font>选项卡片切换<br/>兼容IE6,IE7,Firefox,Opera</h1></div>
<div id="one_2" style="display:none">代码超简洁，强力推荐！<br/>js脚本请放置在页面最后，以保证各板块内容加载完全后再显示</div>
<div id="one_3" style="display:none">新闻列表3</div>
<div id="one_4" style="display:none">新闻列表4</div>
</div>
</div>
<br/>
<div class="Tab2">
<div class="tabbox">
<div class="sort"><a href="#"><font color="#FFFFFF">工业新闻</font></a></div>
<ul style="left:80px;">
<li id="two1" onmousemove="setTab('two',1,9)" class="hover"><a href="#">国内</a></li>
<li id="two2" onmousemove="setTab('two',2,9)" ><a href="#">国际</a></li>
<li id="two3" onmousemove="setTab('two',3,9)"><a href="#">科技</a></li>
<li id="two4" onmousemove="setTab('two',4,9)"><a href="#">思考</a></li>
<li id="two5" onmousemove="setTab('two',5,9)"><a href="#">人物</a></li>
<li id="two6" onmousemove="setTab('two',6,9)"><a href="#">责任</a></li>
<li id="two7" onmousemove="setTab('two',7,9)"><a href="#">品牌</a></li>
<li id="two8" onmousemove="setTab('two',8,9)"><a href="#">烟机</a></li>
<li id="two9" onmousemove="setTab('two',9,9)"><a href="#">物资</a></li>
</ul>
<div class="r_link"><a href="#">全部</a></div>
</div>
<div class="Contentbox">
<div id="two_1" ><h1>鼠标<font color="#CC3300">移动到</font>选项卡片上切换<br/>此效果在同一页面可多次使用</h1></div>
<div id="two_2" style="display:none"><h1>支持选项卡片内链接<br/>功能改进方便</h1></div>
<div id="two_3" style="display:none">新闻列表3</div>
<div id="two_4" style="display:none">新闻列表4</div>
<div id="two_5" style="display:none">新闻列表5</div>
<div id="two_6" style="display:none">新闻列表6</div>
<div id="two_7" style="display:none">新闻列表7</div>
<div id="two_8" style="display:none">新闻列表8</div>
<div id="two_9" style="display:none">新闻列表9</div>
</div>
</div>
</body>
</html>
<script>
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById(name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
http://www.54ny.com.cn//download/yahoo.htm
程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>仿雅虎选项卡</title>
<style type="text/css">
*{padding:0; margin:0; list-style:none;}
img{border:0;}
body{font:12px "宋体";}
a:link{color:#036;text-decoration:none;}
a:visited{color:#369;text-decoration:none;}
a:hover{color:#c30;text-decoration:underline;}
/*选项卡1*/
.Tab1{width:600px; margin:0 auto; border:solid 1px #A5B5C0;}
/*选项卡2*/
.Tab2{width:600px; margin:0 auto; border:solid 1px #A5B5C0;}
/*菜单class*/
.tabbox{height:22px; line-height:22px; text-align:center; border-bottom:solid 1px #A5B5C0; background:url(http://hiphotos.baidu.com/kaka%5Fcat/pic/item/a9015e30ec4ee696a9018ed7.jpg); position:relative;}
.tabbox a:hover{text-decoration:underline;}
.tabbox ul{height:23px; position:absolute; left:0;}
.tabbox li{float:left; display:block; width:50px; height:22px; border-right:solid 1px #A5B5C0; font-weight:bolder; color:#036; cursor:pointer;}
.tabbox li a:link,
.tabbox li a:visited{color:#036; text-decoration:none;}
.tabbox li.hover{height:23px; line-height:23px; background:url(http://hiphotos.baidu.com/kaka%5Fcat/pic/item/a9015e30ec4ee696a9018ed7.jpg) 0 -22px #FFF; color:#C30;}
.tabbox li.hover a:link,
.tabbox li.hover a:visited{color:#C30; text-decoration:none;}
.tabbox li.hover a:hover{text-decoration:underline;}
.tabbox .sort{position:absolute; left:0; width:80px; font-weight:bolder; font-size:14px; background:#879CAB; color:#FFF;}/*左侧的链接*/
.tabbox .r_link{position:absolute; right:0; padding-right:10px;}/*右侧的链接*/
.tabbox .r_link a{padding-left:6px; margin-left:7px; background:url(http://hiphotos.baidu.com/kaka%5Fcat/pic/item/1633714e846fcbc5d1c86add.jpg) no-repeat 0 4px;}
.Contentbox{clear:both; height:180px; padding:8px; text-align:left;}
</style>
</head>
<body>
<br><br><br><br>
<div class="Tab1">
<div class="tabbox">
<ul>
<li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li>
<li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
<li id="one3" onclick="setTab('one',3,4)">新闻3</li>
<li id="one4" onclick="setTab('one',4,4)">新闻4</li>
</ul>
<div class="r_link"><a href="#">链接</a><a href="#">全部</a></div>
</div>
<div class="Contentbox">
<div id="one_1" ><h1>鼠标<font color="#CC3300">点击</font>选项卡片切换<br/>兼容IE6,IE7,Firefox,Opera</h1></div>
<div id="one_2" style="display:none">代码超简洁，强力推荐！<br/>js脚本请放置在页面最后，以保证各板块内容加载完全后再显示</div>
<div id="one_3" style="display:none">新闻列表3</div>
<div id="one_4" style="display:none">新闻列表4</div>
</div>
</div>
<br/>
<div class="Tab2">
<div class="tabbox">
<div class="sort"><a href="#"><font color="#FFFFFF">工业新闻</font></a></div>
<ul style="left:80px;">
<li id="two1" onmousemove="setTab('two',1,9)" class="hover"><a href="#">国内</a></li>
<li id="two2" onmousemove="setTab('two',2,9)" ><a href="#">国际</a></li>
<li id="two3" onmousemove="setTab('two',3,9)"><a href="#">科技</a></li>
<li id="two4" onmousemove="setTab('two',4,9)"><a href="#">思考</a></li>
<li id="two5" onmousemove="setTab('two',5,9)"><a href="#">人物</a></li>
<li id="two6" onmousemove="setTab('two',6,9)"><a href="#">责任</a></li>
<li id="two7" onmousemove="setTab('two',7,9)"><a href="#">品牌</a></li>
<li id="two8" onmousemove="setTab('two',8,9)"><a href="#">烟机</a></li>
<li id="two9" onmousemove="setTab('two',9,9)"><a href="#">物资</a></li>
</ul>
<div class="r_link"><a href="#">全部</a></div>
</div>
<div class="Contentbox">
<div id="two_1" ><h1>鼠标<font color="#CC3300">移动到</font>选项卡片上切换<br/>此效果在同一页面可多次使用</h1></div>
<div id="two_2" style="display:none"><h1>支持选项卡片内链接<br/>功能改进方便</h1></div>
<div id="two_3" style="display:none">新闻列表3</div>
<div id="two_4" style="display:none">新闻列表4</div>
<div id="two_5" style="display:none">新闻列表5</div>
<div id="two_6" style="display:none">新闻列表6</div>
<div id="two_7" style="display:none">新闻列表7</div>
<div id="two_8" style="display:none">新闻列表8</div>
<div id="two_9" style="display:none">新闻列表9</div>
</div>
</div>
</body>
</html>
<script>
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById(name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论