tab 选项卡（初用jQuery）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tab 选项卡（初用jQuery）相关的知识，希望对你有一定的参考价值。
---恢复内容开始---
由于对JQuery不熟悉，折腾了半天......
但不管怎么说，总算是完成了，也是一点进步。
先上完成后的代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .section{ position:relative; font-size: 14px; } .clearfix::after{ content: ""; display:block; height: 0; clear: both; } .tab{ position: relative; margin: 0; padding: 0; text-align: center; } .singer{ float: left; width: 100px; height: 30px; line-height: 30px; border: 1px solid #ccc; margin-left: -1px; /*重叠边距，美观*/ background: linear-gradient(#fefefe, #ededed); list-style: none; cursor: pointer; } .on{ border-bottom:0 ; background:#fff } .songs{ position: absolute; width:403px; height: 300px; margin-top: -1px; /*重叠边距，美观*/ margin-left: -1px; border: 1px solid #ccc; font-size:12px; text-indent: 14px; opacity: 0; } .show{ opacity: 1; border-top:#fff; } </style> </head> <body> <section> <ul class="tab clearfix" id="tab"> <li class="singer on">周杰伦</li> <li class="singer">李健</li> <li class="singer">薛之谦</li> <li class="singer">林俊杰</li> </ul> <div class="songs show"> <p>退后、本草纲目、菊花台、青花瓷</p> </div> <div class="songs"> <p>假如爱有天意、我愿人长久、童年、春风十里不如你</p> </div> <div class="songs"> <p>丑八怪、绅士、演员、方圆几里</p> </div> <div class="songs"> <p>江南、杀手、醉赤壁、一千年以后</p> </div> </section> </body> </html>
上面是HTML/CSS代码，没什么大问题。
接下来切换效果，我们用jQuery实现，这个过程够折腾，一把辛酸泪。
用jQuery的时候一定不要和原生js混用！用jQuery的时候一定不要和原生js混用！用jQuery的时候一定不要和原生js混用！重要的事情说三遍！
不然，就是下面这种效果....
<script>
//思路混杂，原生js和jQuery混用，丢死人了...
$(document).ready(function(){
var singers=$(".singer");
var songs=$(".songs");
var index=0;
var len=singers.length;
for(var i=0;i<len;i++){
singers[i].onmouseover=function(){
singers.eq(index).removeClass("on");
songs.eq(index).removeClass("show");
singers.eq(i).addClass("on");
songs.eq(i).addClass("show");
index=i;
}
}
})
</script>
所以运行的时候那画面太美我不敢看，程序员有三宝：一看、二查、三请教。崩溃的我于是跑去找大神了，大神一扫代码，三下五除二给了我几行代码，效果搞定！
下面是大神的代码修改版。
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
// 先选择好所有的 菜单li 和 面板div
var li = $(‘li.singer‘),
song = $(‘div.songs‘);
// mouse指针位菜单li上方时的事件
li.mouseover(function(){
// 当前是第几个li元素
var n = $(this).index();
// 先让菜单和面板恢复成默认
li.removeClass("on");
song.removeClass("show");
// 再分别加上启用的效果
li.eq(n).addClass("on");
song.eq(n).addClass("show");
});
});
</script>
大神就是大神，佩服得五体投地。小白仰望星星眼~
当然，我不想一字不差照抄大神的代码，于是我在在这个基础上继续改善完成了我的代码，再添加一个淡入效果。
于是最终完成版是这样子滴。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.section{
position:relative;
font-size: 14px;
}
.clearfix::after{
content: "";
display:block;
height: 0;
clear: both;
}
.tab{
position: relative;
margin: 0;
padding: 0;
text-align: center;
}
.singer{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
margin-left: -1px; /*重叠边距，美观*/
background: linear-gradient(#fefefe, #ededed);
list-style: none;
cursor: pointer;
}
.on{
border-bottom:0 ;
background:#fff
}
.songs{
position: absolute;
width:403px;
height: 300px;
margin-top: -1px; /*重叠边距，美观*/
margin-left: -1px;
border: 1px solid #ccc;
font-size:12px;
text-indent: 14px;
opacity: 0;
}
.show{
opacity: 1;
border-top:#fff;
}
</style>
</head>
<body>
<section>
<ul class="tab clearfix" id="tab">
<li class="singer on">周杰伦</li>
<li class="singer">李健</li>
<li class="singer">薛之谦</li>
<li class="singer">林俊杰</li>
</ul>
<div class="songs show">
<p>退后、本草纲目、菊花台、青花瓷</p>
</div>
<div class="songs">
<p>假如爱有天意、我愿人长久、童年、春风十里不如你</p>
</div>
<div class="songs">
<p>丑八怪、绅士、演员、方圆几里</p>
</div>
<div class="songs">
<p>江南、杀手、醉赤壁、一千年以后</p>
</div>
</section>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
var singers=$(".singer");
var songs=$(".songs");
var p=$("p");
singers.mouseover(function(){
var n=$(this).index();
singers.removeClass("on");
songs.removeClass("show");
p.hide();
singers.eq(n).addClass("on");
songs.eq(n).addClass("show");
p.eq(n).fadeIn();
})
})
</script>
</body>
</html>
每天进步一点点。
---恢复内容结束---
以上是关于tab 选项卡（初用jQuery）的主要内容，如果未能解决你的问题，请参考以下文章