javascript+css 实现tab功能

最新推荐文章于 2021-08-03 20:52:53 发布

iteye_14265

最新推荐文章于 2021-08-03 20:52:53 发布

阅读量112

点赞数

文章标签： javascript ViewUI

本文介绍了一种通过JavaScript实现的Tab功能，该功能允许用户在不同的内容面板之间进行切换。通过简单的HTML结构和JavaScript函数，可以轻松创建交互式的Tab组件。

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

<html>
 <head>
 <style type="text/css">

.tabheader table {
 border-collapse: collapse; /* for IE */
 border-spacing: 0; /* for N6 */
}

.tabheader table tr td {margin:0;padding:0;border-width:0}

.tabheader .close {
 border-style: solid;
 border-width: 1px; 
 border-color: #000;
 background-color: #d0d0d0;
 margin:0;
 padding: 0.5em;
 white-space: nowrap;
}
.tabheader .open {
 border-style: solid;
 border-width: 1px; 
 border-color: #000 #000 #fff #000;
 background-color: white;
 margin:0;
 padding: 0.5em;
 white-space: nowrap;
}
.tabheader .spc {
 border-style: solid;
 border-width: 1px 0 1px 0; 
 border-color: #fff #fff #000 #fff;
 margin:0;
 padding: 0.5em;
 white-space: nowrap;
}

.tabheader a {text-decoration: none;}
.tabbody {
 border-color: black;
 border-style: solid;
 border-width: 0 1px 1px 1px;
 padding: 1em;
}

</style>
<script language="JavaScript">
<!--

function seltab(bpref, hpref, id_max, selected) {
 if (! document.getElementById) return;
 for (i = 0; i <= id_max; i++) {
 if (! document.getElementById(bpref + i)) continue;
 if (i == selected) {
 document.getElementById(bpref + i).style.visibility = "visible";
 document.getElementById(bpref + i).style.position = "";
 document.getElementById(hpref + i).className = "open";
 } else {
 document.getElementById(bpref + i).style.visibility = "hidden";
 document.getElementById(bpref + i).style.position = "absolute";
 document.getElementById(hpref + i).className = "close";
 }
 }
}
// -->
</script>
<title>Tab功能</title>
</head>
 <body bgcolor="white" onload="seltab('box', 'head', 10, 1)">
 <h1></h1>
 <div class="tabheader">
 <table>
 <tr>
 <td>
 <div id="head1">
 <a href="javascript:seltab('box', 'head', 10, 1)">tab1</a>
 </div>
 </td>
 <td><div class="spc"> </div>
 </td>
 <td>
 <div id="head2">
 <a href="javascript:seltab('box', 'head', 10, 2)">tab2</a>
 </div>
 </td>
 <td><div class="spc"> </div>
 </td>
 <td>
 <div id="head3">
 <a href="javascript:seltab('box', 'head', 10, 3)">tab3</a>
 </div>
 </td>
 <td><div class="spc"> </div>
 </td>
 <td>
 <div id="head4">
 <a href="javascript:seltab('box', 'head', 10, 4)">tab4</a>
 </div>
 </td>
 <td width="100%"><div class="spc"> </div>
 </td>
 </tr>
 </table>
 </div>
 <div class="tabbody">
 <div id="box1">
 <p>
 test
 </p>
 </div>
 <div id="box2">
 <p>test
 </p>
 <p>test
 </p>
 </div>
 <div id="box3">
 <p>testtesttest
 </p>
 </div>
 <div id="box4">
 <p>
 testtest
 </p>
 </div>
 </div>
 </div>
 </body>
</html>