<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>
分享到:
相关推荐
鼠标移动到div上弹出div或者信息,并且自适应显示位置;每一步代码都有详细的解释;简单,通俗易懂
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
鼠标经过显示隐藏层js,隐藏层可加css样式,可随意控制大小,js有详细注释
DivCss鼠标划过滑动门效果,源程序。DivCss鼠标划过滑动门效果,源程序。
Jquery+div+css 鼠标经过内容切换实例,有用到可以拿去参考哦!
主要介绍了jQuery实现鼠标滑过Div层背景变颜色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
div css3 transform和transition属性鼠标滑过动画效果 div css3 transform和transition属性鼠标滑过动画效果
div+css 鼠标经过 边框线条特效 div+css 鼠标经过 边框线条特效 div+css 鼠标经过 边框线条特效 div+css 鼠标经过 边框线条特效
div+css制作的鼠标经过放大字体样式的特效,让你美味无穷啊
div css制作飘带css导航条样式鼠标滑过高亮显示代码
在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题,就是在悬浮出现按钮后,鼠标要移到按钮上过程中,离开了DIV经过间距时,按钮就会消失。 解决办法: 1. 选择更大区域的DIV 这个时候...
div 鼠标画过样式1
默认文字隐藏在div外部,当鼠标悬停后,图片向上移动 同时显示出底部隐藏的内容 使用方法: 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可 (注意保持图片路径正确,...
三款很简单实用的鼠标滑过出现一个div层,还有一个是鼠标滑过图片显示价格,很简单实用
<!... <... <head> ...meta charset="UTF-8">...CSS3 JS鼠标经过显示二维码和二级菜单特效<... 这是一款比较简单实用的基于CSS3实现的鼠标经过显示二维码和二级菜单特效,CSS3鼠标悬停事件代码。
鼠标经过出现DIV 层,层内鼠标移动显示按钮,一个很好的JS特效,欢迎下载
鼠标滑过旋转小例子,做着玩的
这是个jquery 插件,作用是当鼠标经过图片是会显示底部影藏的div效果有好几种都是自己私藏的好东西,希望大家能够有用!
纯css3实现的鼠标悬停图片后的动画效果,默认文字隐藏在div外部,当鼠标悬停后,图片向上移动,同时显示出底部隐藏的内容