在掌握了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>
以上代码可以供学习交流直接使用,转载请声明来源。