jQuery实现切换面板

最新推荐文章于 2020-09-17 10:28:33 发布

不会说相声的dancer不是好码农

最新推荐文章于 2020-09-17 10:28:33 发布

阅读量254

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43739287/article/details/106857865

版权

文章目录

jQuery实现切换面板
实现效果

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.tabs>ul{
				list-style: none;
				height: 50px;
				line-height: 50px;
				background: antiquewhite;
			}
			.tabs>ul>li{
				display: inline-block;
				padding: 0 20px;
			}
			.tabs>ul>li>a:hover{
				color: red;
			}
			a{
				text-decoration: none;
			}
			.tabs>ul>li.selected{
				background: green;
			}
			.tabs>ul>li.selected>a{
				color: white;
			}
			.tabs>div{
				display: none;
			}
			.tabs>div.selected{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tabs">
			<ul>
				<li class="selected"><a href="#tab1">商品1</a></li>
				<li><a href="#tab2">商品2</a></li>
				<li><a href="#tab3">商品3</a></li>
			</ul>
			<div id="tab1" class="selected">
				商品内容1
			</div>
			<div id="tab2">
				商品内容2
			</div>
			<div id="tab3">
				商品内容3
			</div>
		</div>

	<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
	<script type="text/javascript">
		$(".tabs>ul>li").click(function(){
			var _this = $(this);
			var _last = _this.siblings(".selected");
			var _selector = _last.children().attr("href");
			var _id = _this.children().attr("href");
			$(_selector).removeClass("selected");
			$(_id).addClass("selected");
			_this.addClass("selected");
			_last.removeClass("selected");
		})
	</script>
	</body>
</html>

页面渲染：ul的高度撑开外层div，li的padding确定每个li的宽度
从语义上讲，商品内容的div属于外层tabs的div
用jQuery为被选中的元素添加selected属性
引入jQuery CDN https://www.bootcdn.cn/jquery/ <script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
jQuery API https://jquery.cuishifeng.cn/
获取当前选中的li元素的类为selected的li兄弟元素，并去掉他的selected。
通过设置标签的href属性值为对应div的id定位到对应div，添加或去掉selected

不会说相声的dancer不是好码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现切换面板

文章目录jQuery实现切换面板代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .tabs>ul{ list-style: none; height: 50px; line-height: 50px; backgro
复制链接

扫一扫