您当前的位置: 首页 > HTML/CSS

在HTML中创建一个选项卡（Tab），并在选中时高亮显示当前选项卡

发布时间：2023-09-13 08:45:25 文章来源：www.iduyao.cn 采编人员：毒药

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多组选项卡示例</title>
<style type="text/css">

#tab-container{width:1200px;margin: 0 auto;}

.tab-buttonarear{height: 30px;width: 1200px;background: #F3F3F3;}
.tab-buttonarear li{display: block;height: 30px; width: auto;padding: 0 20px;text-align: center;font: 400 14px/30px 'microsoft yahei';color: #525252;float: left;border-right: 1px #DDDDDD solid; cursor: pointer;}
.tab-buttonarear .active{background: #FFF;color: #1F1F1F;border-top: 3px #07c solid;margin-top: -3px;}

</style>
<script>
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?"active":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
</head>

<body>
<div id="tab-container">
<div class="tab-buttonarear">
<ul>
<li id="A1" onclick="setTab('A',1,4)" class="active">新闻1</li>
<li id="A2" onclick="setTab('A',2,4)" >新闻2</li>
<li id="A3" onclick="setTab('A',3,4)">新闻3</li>
<li id="A4" onclick="setTab('A',4,4)">新闻4</li>
</ul>
</div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_A_1" >新闻列表1</div>
<div id="con_A_2" style="display:none">新闻列表2</div>
<div id="con_A_3" style="display:none">新闻列表3</div>
<div id="con_A_4" style="display:none">新闻列表4</div>
</div>
</div>
<div id="tab-container">
<div class="tab-buttonarear">
<ul>
<li id="B1" onclick="setTab('B',1,4)" class="active" >新闻1</li>
<li id="B2" onclick="setTab('B',2,4)">新闻2</li>
<li id="B3" onclick="setTab('B',3,4)">新闻3</li>
<li id="B4" onclick="setTab('B',4,4)">新闻4</li>
</ul>
</div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_B_1" >新闻列表1</div>
<div id="con_B_2" style="display:none">新闻列表2</div>
<div id="con_B_3" style="display:none">新闻列表3</div>
<div id="con_B_4" style="display:none">新闻列表4</div>
</div>
</div>
<div id="tab-container">
<div class="tab-buttonarear">
<ul>
<li id="C1" onclick="setTab('C',1,4)" class="active" >新闻1</li>
<li id="C2" onclick="setTab('C',2,4)">新闻2</li>
<li id="C3" onclick="setTab('C',3,4)">新闻3</li>
<li id="C4" onclick="setTab('C',4,4)">新闻4</li>
</ul>
</div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_C_1" >新闻列表1</div>
<div id="con_C_2" style="display:none">新闻列表2</div>
<div id="con_C_3" style="display:none">新闻列表3</div>
<div id="con_C_4" style="display:none">新闻列表4</div>
</div>
</div>
</body> 
</html>

html ab 高亮选项卡

友情提示：
信息收集于互联网，如果您发现错误或造成侵权，请及时通知本站更正或删除，具体联系方式见页面底部联系我们，谢谢。

在HTML中创建一个选项卡（Tab），并在选中时高亮显示当前选项卡

相关帖子：

热门分类：