在掌握了jQ的基础知识之后，我们来看看jQ如何实现鼠标点击切换列表？
这个效果使用js也可以实现，当然使用其他jQ代码也能实现，但是博主写的这个代码便于维护，只有你写过项目，一定会发现便于维护的代码和普通代码的差别有多大。
以下代码注释部分为第一种普通代码实现，你可以对比观察区别。
写在前面：一定要记得导入js库，建议不要最新的。
直接上代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>鼠标控制不同列表</title><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><style type="text/css">*{margin: 0;padding: 0;}#wide{width: 400px;margin: 0 auto;}#but{text-align: center;font-size: 24px;}.oldsong,.publicsong,.moviesong{/*display: none;*/margin-left: 150px;} </style></head><body><div id="wide" style="background-color: aqua;"><div id="but"><button id="oldsong">经典老歌</button><button id="publicsong">流行歌曲</button><button id="moviesong">影视金曲</button></div><div class="oldsong" id="old"><ul><li>敢问路在何方</li><li>2002年的第一场雪</li><li>当</li></ul></div><div class="publicsong" id="public"><ul><li>非酋</li><li>冷风吹</li><li>不爱我就拉倒</li></ul></div><div class="moviesong" id="movie"><ul><li>此生不换</li><li>偏爱</li><li>寂寞在唱歌</li></ul></div></div></body><script type="text/javascript">$().ready(function(){//统一编码，便于维护// 为第一个设置默认显示$("#but button:first").css("background","#FFC0CB");$("#wide div:gt(1)").hide();//隐藏下标大于1的标签，从0开始// 点击按钮之后的方法$("#but button").click(function(){$("#but button").css("background","");//所有按钮背景设为空$(this).css("background","#FFC0CB");// 设置点击的按钮的背景色$("#wide div:not(:first)").hide();//除了第一个div（按钮）其他隐藏//1.获得到点击的按钮的id属性值 2.然后补上.变成class选择 3.显示2补上的这个div$("."+$(this).attr("id")).show();});
// $("#oldsong").click(// 点击经典老歌按钮
// function(){
// $(".song").css("display","none");
// $("button").css("background","");
// $(this).css("background","#FFC0CB");
// $("#old").css("display","block");
// }
// );
// $("#publicsong").click(// 点击流行歌曲按钮
// function(){
// $(".song").css("display","none");
// $("button").css("background","");
// $(this).css("background","#FFC0CB");
// $("#public").css("display","block");
// }
// );
// $("#moviesong").click(// 点击影视金曲按钮
// function(){
// $(".song").css("display","none");
// $("button").css("background","");
// $(this).css("background","#FFC0CB");
// $("#movie").css("display","block");
// }
// );});</script>
</html>
以上代码可以供学习交流直接使用，转载请声明来源。