TAB选项卡效果（DIV+CSS ）

最新推荐文章于 2021-08-04 08:27:50 发布

如锋

最新推荐文章于 2021-08-04 08:27:50 发布

阅读量3.7k

点赞数

分类专栏： Java 文章标签： div css javascript generator function html

本文链接：https://blog.csdn.net/prufeng/article/details/4228304

版权

Java 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<style>
ul
{
margin:0;
padding:0;
list-style-type:none;
vheight:24px;
}
ul li
{
float:left;
display:inline;
}
ul a
{
text-decoration: none;
border-top:1px solid #ddd;
border-bottom:1px solid #ccc;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
display: block;
padding: 5px 0 3px;
margin-left:-1px;
width:158px;
font-weight: bold;
text-align:center;
line-height:15px;
color: #11449E;
}

a.on,a:hover
{
padding-top: 6px;
padding-bottom:3px;
width:159px;
border: 1px solid #ccc;
border-bottom: 0;
background:#DEEBFF;
}
</style>
<script>function findA(obj)
{
TagA=obj.getElementsByTagName("a");
if (TagA.length>0)
return TagA[0];
}

function chShift(o,divGroupID)
{
o.style.cursor="pointer";
var t=o.parentNode;
var tA=t.getElementsByTagName("a");
var tGroup=document.getElementById(divGroupID);
var tGroupDIV=findContentDIV(tGroup);

for(i=0;i<tA.length;i++)
{
tA[i].className= null;
tGroupDIV[i].style.display="none";
if(tA[i]==findA(o))
{
tA[i].className="on";
tGroupDIV[i].style.display="block";
}
}
}</script>
<table><tr><td>
<div>
<ul>
<li οnmοuseοver="javascript:chShift(this,'divGroup')"><a class="on">Tab标题一</a></li>
<li οnmοuseοver="javascript:chShift(this,'divGroup')"><a>Tab标题二</a></li>
<li οnmοuseοver="javascript:chShift(this,'divGroup')"><a>Tab标题三</a></li>
</ul>
</div>
</td></tr>
<tr><td>

<div>
<table>
<tr><td>Tab标题一对应的内容</td></tr>
<tr><td>Tab标题一对应的内容</td></tr>
<tr><td>Tab标题一对应的内容</td></tr>
<tr><td>Tab标题一对应的内容</td></tr>
<tr><td>Tab标题一对应的内容</td></tr>

</table>

</div>
<div style="display:none">
Tab标题二对应的内容
</div>
<div style="display:none">
Tab标题三对应的内容
</div>
</div>
</td></tr></table>
</BODY>
</HTML>