<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
html,body{margin:0;padding:0;width:100%;background:#ededed;}
#main{width:400px;height:288px;margin:200px auto;border:1px solid #ccc;padding-top:20px;}
#tab_header>span{display:inline-block;height:30px;line-height:30px;text-align:center;width:80px;cursor:pointer;}
#tab_header>span.selected{background:#ff00ff;color:#ffffff;}
#tab_body>ul{display:none;}
#tab_body>ul.shown{display:block;}
</style>
<script type="text/javascript" src="http://www.duowan.com/assets/js/jquery.js"></script>
</head>
<body>
<div id="main">
<div id="tab_header">
<span class="selected">tab1</span><span>tab2</span><span>tab3</span>
</div>
<div id="tab_body">
<ul class="shown">
<li>tab1 - 1</li>
</ul>
<ul>
<li>tab2 - 1</li>
<li>tab2 - 2</li>
</ul>
<ul>
<li>tab3 - 1</li>
<li>tab3 - 2</li>
<li>tab3 - 3</li>
</ul>
</div>
</div>
<script>
$('#tab_header').find('span').on('mouseover', function(){
$(this).addClass("selected").siblings().removeClass("selected");
$('#tab_body').find('ul').eq($(this).index()).addClass("shown").siblings().removeClass("shown");
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
html,body{margin:0;padding:0;width:100%;background:#ededed;}
#main{width:400px;height:288px;margin:200px auto;border:1px solid #ccc;padding-top:20px;}
#tab_header>span{display:inline-block;height:30px;line-height:30px;text-align:center;width:80px;cursor:pointer;}
#tab_header>span.selected{background:#ff00ff;color:#ffffff;}
#tab_body>ul{display:none;}
#tab_body>ul.shown{display:block;}
</style>
<script type="text/javascript" src="http://www.duowan.com/assets/js/jquery.js"></script>
</head>
<body>
<div id="main">
<div id="tab_header">
<span class="selected">tab1</span><span>tab2</span><span>tab3</span>
</div>
<div id="tab_body">
<ul class="shown">
<li>tab1 - 1</li>
</ul>
<ul>
<li>tab2 - 1</li>
<li>tab2 - 2</li>
</ul>
<ul>
<li>tab3 - 1</li>
<li>tab3 - 2</li>
<li>tab3 - 3</li>
</ul>
</div>
</div>
<script>
$('#tab_header').find('span').on('mouseover', function(){
$(this).addClass("selected").siblings().removeClass("selected");
$('#tab_body').find('ul').eq($(this).index()).addClass("shown").siblings().removeClass("shown");
});
</script>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考
第1个回答 2016-07-13
。。。可以做啊，但你要的只是切换效果，还是连同这个界面效果呢
相似回答