原生js
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>tab标签页</title>
<style>
*{margin: 0;padding: 0;}
#intro ul li
{
list-style: none;
float: left;
margin-right: 4px;
font-size: 15px;
}
#box
{
height: 200px;
width: 220px;
margin: 20px auto;
border: 1px solid black;
}
#intro
{
height: 24px;
width: 170px;
margin: 10px auto;
}
#content
{
height: 120px;
width: 170px;
margin: 5px auto;
border: 1px solid black;
}
#content div
{
display: none;
}
#intro ul li
{
height: 20px;
width: 50px;
cursor: pointer;
border: 1px solid black;
text-align: center;
}
#intro ul li.current
{
background: greenyellow;
}
</style>
</head>
<body>
<div id="box">
<div id="intro">
<ul id="ul">
<li class="current">php</li>
<li>ruby</li>
<li>python</li>
</ul>
</div>
<div id="content">
<div style="display: block;">介绍.....php</div>
<div>介绍.....ruby</div>
<div>介绍.....python</div>
</div>
</div>
<script>
var oDiv1=document.getElementById('intro');
var aLi=oDiv1.getElementsByTagName('li');
var oDiv2=document.getElementById('content');
var aDiv=oDiv2.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++)
{
aLi[i].index=i;
aLi[i].οnmοuseοver=function()
{
for(var i=0;i<aDiv.length;i++)
{
aLi[i].className='';
aDiv[i].style.display='none';
}
this.className='current';
aDiv[this.index].style.display='block';
}
}
</script>
</body>
</html>
jQuery部分代码，替换上面的js部分
$('#intro ul li').mouseover(function(){
$(this).addClass('current').siblings().removeClass('current').parent().parent().next().find('div').eq($(this).index()).show().siblings().hide();
});
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
