用jQuery做选择卡案例

最新推荐文章于 2022-05-12 07:15:00 发布

空谷丶幽兰

最新推荐文章于 2022-05-12 07:15:00 发布

阅读量207

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/108943039

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择卡</title>
	<style>
		*{
			margin:0px;
			padding: 0px;
		}
		.tab{
			margin-top: 100px;
			width: 1024px;
			height: 768px;
			margin-left: 200px;
		    position: absolute;
		}

		.tag{
			position: relative;
			width: 1024px;
			height: 22px;
			margin-bottom: 3px;
			clear: both;  /* 左右两侧不允许出现浮动元素 */
		}

		.tag ul li{
			position: relative;
			left: 0px;
			list-style: none;
			float: left;
			border: 1px solid #ccc;
			margin-left: 5px;
			cursor: pointer;
			padding: 2px 5px;
			border-bottom: none;
		}
		.box{
			position: relative;
			
			/* top: 10px; */
			width: 300px;
			height: 200px;
			border: 1px solid #ccc;
		}
		.box div{
			padding:5px;
		}

		.tag li.selected{
			
			background: #6D84B4;
		}
		.hide{
			display: none;
		}
	</style>
	<script src="jquery1.7.2.js"></script>
	<script>
		$(function(){
			var $li=$(".tab .tag ul li");
			$li.click(function(){ //给所有的li注册点击事件
				$(this).addClass('selected');//当前<li>元素高亮
				$(this).siblings().removeClass('selected');//去掉其它同辈<li>元素的高亮
				var index=$(this).index();// 获取当前点击的<li>元素 在 全部li元素中的索引。
				$(".box div").eq(index).show().siblings().hide();//显示 <li>元素对应的<div>元素,隐藏其它几个同辈的<div>元素
			})
		})
	</script>
</head>
<body>
	  <div class="tab">
	  	<div class="tag">
	  		<ul>
	  			<li class="selected">时事</li>
	  			<li>体育</li>
	  			<li>娱乐</li>
	  		</ul>
	  	</div>
		
		<div class="box">
			<div>时事</div>
			<div class="hide">体育</div>
			<div class="hide">娱乐</div>
		</div>

	  </div>
</body>
</html>

空谷丶幽兰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用jQuery做选择卡案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择卡</title> <style> *{ margin:0px; padding: 0px; } .tab{ margin-top: 100px; width: 1024px; height: 768px; margin-lef.
复制链接

扫一扫