自学web前端练手——jQuery的选项卡实现

最新推荐文章于 2024-08-04 20:38:28 发布

lvshaoshishang

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量230

点赞数

本文链接：https://blog.csdn.net/lvshaoshishang/article/details/105226732

版权

jq的代码量的确比js要少，目前还不熟练还在摸索中_(:з」∠)_

效果如下：
点击选项卡切换效果时可看到代码自动改变。
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		font: 12px/19px Arial,Helvetica,sans-serif;
		color: #666;
	}
	.tab{
		width: 240px;
		margin: 50px;
	}
	.tab_menu{
		clear: both;
	}
	.tab_menu li{
		float: left;
		text-align: center;
		cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/
		list-style: none;
		padding: 1px 6px;
		margin-right: 4px;
		background: #F1F1F1;
		border: 1px solid #898989;
		border-bottom: none;
	}
	.tab_menu li.hover{
		background: #DFDFDF;
	}
	.tab_menu li.selected{
		color: #FFF;
		background: #6D84B4;
	}
	.tab_box{
		clear: both;
		border: 1px solid #898989;
		height: 100px;}
	.tab_box div{
		padding: 5px;
	}
	.hide{
		display: none;
	}
	</style>
</head>
<body>
	<div class="tab">
		<div class="tab_menu">
			<ul>
				<li class="selected">吴亦凡</li>
				<li>王一博</li>
				<li>王俊凯</li>
			</ul>
		</div>
		<div class="tab_box">
			<div>Kris Wu</div>
			<div class="hide">Yibo Wang</div>
			<div class="hide">Karry Wang</div>
		</div>
	</div>
	<script src="jquery-3.4.1.js"></script>
	<script type="text/javascript">
	$(function(){
		var $div_li=$("div.tab_menu ul li");
		$div_li.click(function(){
			$(this).addClass("selected")
				   .siblings().removeClass("selected");
			var index=$div_li.index(this);
			$("div.tab_box>div")
					.eq(index).show()//eq() 选择器选取带有指定 index 值的元素
					.siblings().hide();
		})
	})
	</script>
</body>
</html>

lvshaoshishang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学web前端练手——jQuery的选项卡实现

jq的代码量的确比js要少，目前还不熟练还在摸索中_(:з」∠)_效果如下：点击选项卡切换效果时可看到代码自动改变。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <...
复制链接

扫一扫