CSS tab 选项卡(兼容好)

左手的ㄟ右手 2022-09-30 10:56 47阅读 0赞

<!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>CSS tab 选项卡</title>  
<style type="text/css">  
\*\{ padding:0px; margin:0px;\}  
body\{ text-align:center;font-size:12px;\}  
.page\{  
 width:600px;  
 margin:10px auto;   
 text-align:left;  
 \}  
/\*内容模块 \*/  
.tab\_mo\{   
border:1px solid \#ccc;   
border-top:none;   
padding:10px;  
\}  
/\*菜单模块 \*/  
.tab\{  
 border-bottom:1px solid \#ccc; /\* 菜单模块的底部边框，也就是内容模块的上边框 \*/  
 list-style:none;  
 padding:4px 5px 3px 5px;  
 \}  
.tab li\{   
display:inline; /\* 【重点】让li横向排列。\*/  
 font-size:12px;  
 \}  
.tab li a\{   
padding:3px 4px; /\* 因为没有固定高度，所以用填充来调整显示效果。 \*/  
border:1px solid \#ccc;  /\* 菜单项的边框 \*/  
color:\#888;   
border-bottom:none; /\* 底部无边框 \*/  
text-decoration:none;  
background:\#f7f7f7  
\}  
/\*鼠标经过时的样式 \*/  
.tab li a:hover\{   
background:\#fff;  
\}  
/\*选中时的样式 \*/  
.tab li.no a\{   
background:\#fff;   
border-bottom:none; /\*  隐藏菜单项的底部边框 \*/  
position:relative;  /\* 【重点】菜单项里面的连接使用了相对定位 \*/  
top:1px;            /\* 【重点】相对于外层顶部为1像素，正好是底部边框的像素。所以就遮住了ul的底部边框 \*/  
color:\#000000;   
font-weight:bold  
\}  
</style>  
<script type="text/javascript">  
function tab(a,b,c)   
\{   
for(i=1;i<=b;i++)\{   
if(c==i)  
\{   
// 判断选择模块  
document.getElementById(a+"\_mo\_"+i).style.display = "block";  // 显示模块内容  
document.getElementById(a+"\_to\_"+i).className = "no";   // 改变菜单为选中样式  
\}   
else\{   
// 没有选择的模块  
document.getElementById(a+"\_mo\_"+i).style.display = "none"; // 隐藏没有选择的模块  
document.getElementById(a+"\_to\_"+i).className = "q";  // 清空没有选择的菜单样式  
\}   
\}   
\}  
</script>  
</head>  
  
  
<body>  
<div class="page">  
<ul class="tab">  
<li id="tab\_to\_1" class="no"><a href="\#" οnmοuseοver="tab('tab',4,1)">最新更新</a></li>  
<li id="tab\_to\_2"><a href="\#" οnmοuseοver="tab('tab',4,2)">热门排行</a></li>  
<li id="tab\_to\_3"><a href="\#" οnmοuseοver="tab('tab',4,3)">最新下载</a></li>  
<li id="tab\_to\_4"><a href="\#" οnmοuseοver="tab('tab',4,4)">网页特效</a></li>  
</ul>  
<div class="tab\_mo">  
<div id="tab\_mo\_1">  
最新更新的内容  
</div>  
<div id="tab\_mo\_2" style="display:none">  
热门排行在这里哦  
</div>  
<div id="tab\_mo\_3" style="display:none">  
最新下载在这里呀  
</div>  
<div id="tab\_mo\_4" style="display:none">  
<a href="/jscss/">精品网页特效，请点击链接</a></div>  
</div>  
</div>  
</body>  
</html>