---恢复内容开始---
由于对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>
每天进步一点点。
---恢复内容结束---
时间： 2024-11-05 22:58:01