`
aideehorn
  • 浏览: 256478 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DIV的鼠标滑过显示层

阅读更多

<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:258px;
font-weight: bold;
text-align:center;
line-height:15px;
color: #11449E;
}

a.on,a:hover
{
padding-top: 6px;
padding-bottom:3px;
width:259px;
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 findContentDIV(obj)
{
TagDiv=obj.childNodes;
var arrDiv = new Array;
for(i=0;i<TagDiv.length;i++)
{
var objDiv = TagDiv[i];
var re = /div/i;
var arr = re.exec(objDiv.tagName);
if(arr != null)
{
if(arr.index == 0)
{
arrDiv.push(objDiv);
}
}
}
return arrDiv;
}

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>
<div>
<ul>
<li onmouseover="javascript:chShift(this,'divGroup')"><a class="on">Tab标题一</a></li>
<li onmouseover="javascript:chShift(this,'divGroup')"><a>Tab标题二</a></li>
<li onmouseover="javascript:chShift(this,'divGroup')"><a>Tab标题三</a></li>
</ul>
</div>

<div id="divGroup">

<div>Tab标题一对应的内容</div>
<div style="display:none">Tab标题二对应的内容</div>
<div style="display:none">Tab标题三对应的内容</div>

</div>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics