tab 标签选项卡

最新推荐文章于 2025-08-12 15:30:12 发布

原创最新推荐文章于 2025-08-12 15:30:12 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #class #function #float #menu #css

本文介绍如何使用CSS和JavaScript实现一个简单的TAB选项卡效果。主要包括：CSS样式定义、HTML结构设置及JavaScript代码实现选项卡切换功能。通过具体实例展示了各部分的详细代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. css

body,div,ul,li{padding:0 auto;margin:0 auto; text-align:center;}
body{font:12px "宋体";text-align:center;}
a:link{color:#00F;text-decoration:none;}
a:visited {color: #00F;text-decoration:none;}
a:hover {color: #c00;text-decoration:underline;}
ul{ list-style:none;}
#Tab2{width:500px;margin:0px;padding:0px;margin:0 auto;}
.Menubox {margin:0px auto;padding:0px inherit;width:498px;height:23px;line-height:28px;border-top:1px solid #A8C29F;border-left:1px solid #A8C29F;border-right:1px solid #A8C29F;}
.Menubox ul{margin:0px;padding:0px auto;padding-left:20px;}
.Menubox li{float:left;display:block;cursor:pointer;width:115px;text-align:center;color:#949694;}
.Menubox li.hover{padding:0px;background:#000;width:116px;color:#fff;height:23px;line-height:23px;}
.Contentbox{clear:both;margin-top:0px;border:1px solid #A8C29F;border-top:none;height:181px;text-align:center;padding-top:8px;}

2. 页面代码 DIV

<div id="Tab2">
<div class="Menubox">
<ul>
   <li id="two1" onmouseover="setTab('two',1,4)" class="hover">新闻1</li>
   <li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li>
   <li id="two3" onmouseover="setTab('two',3,4)">新闻3</li>
   <li id="two4" onmouseover="setTab('two',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox">
   <div id="con_two_1" >新闻列表1</div>
   <div id="con_two_2" style="display:none">wang</div>
   <div id="con_two_3" style="display:none">wangding</div>
   <div id="con_two_4" style="display:none">wangdingjun</div>
</div>
</div>

3. 实现 TAB 选项卡切换的 JS 代码

function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}

OK , TAB 选项卡的功能已经实现 , 有一个仿慧聪的 TAB 选项卡更强悍 , 但暂时米有找到 . 待续 . . .