您的位置：首页 > Web前端 > JQuery

Tab标签页（面试常考）分别用原生js和jquery实现

2017-04-13 23:00 726 查看

原生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].onmouseover=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();
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航