前端框架jQ使用之鼠标点击切换列表

最新推荐文章于 2023-07-25 12:02:46 发布

BalanceWei

最新推荐文章于 2023-07-25 12:02:46 发布

阅读量1.3k

点赞数

分类专栏：前端实用总结前端框架——jQuery 文章标签：列表切换鼠标 jQ

本文链接：https://blog.csdn.net/qq_36793007/article/details/83001885

版权

前端实用总结同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端框架——jQuery

5 篇文章 0 订阅

订阅专栏

在掌握了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>

以上代码可以供学习交流直接使用，转载请声明来源。