您的位置：首页 > 编程语言

简单tab选项卡切换代码教程

2016-08-17 15:30 357 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<script src="js/jquery.min.js"></script>
<style>
.tab{width:80%;margin:100px auto;}
.top{overflow: hidden;}
.top li{float: left; width: 10%; cursor: pointer;}
}
}
</style>
</head>
<body>
<div class="tab">
<div class="top" id="top">
<ul>
<li>我是选项卡1</li>
<li>我是选项卡2</li>
<li>我是选项卡3</li>
<li>我是选项卡4</li>
</ul>
</div>
<div class="con" id="con">
<div >hahahha1</div>
<div  style="display:none;">hahahha2</div>
<div  style="display:none;">hahahha3</div>
<div  style="display:none;">hahahha4</div>
</div>
</div>
<script>

$(function(){
$('.top li').each(function(i){
$(this).hover(function(){
$('.con div').hide();
$('.con div:eq('+i+')').show();
})
})

})
window.onload=myfor;
function myfor(){
var x=document.getElementsByClassName('li');
var y=document.getElementById('con')

}
</script>
</body>
</html>

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

标签： tab选项卡切换

相关文章推荐

新的分享

章节导航