在掌握了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>
以上代碼可以供學習交流直接使用，轉載請聲明來源。