---恢复内容开始---
由于对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>
每天进步一点点。
---恢复内容结束---