master

分支 (1)

管理

管理

master

JqueryForDemo
/
tab选项卡.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			.wrapper{
				width: 1000px;
				height: 475px;
				margin: 0 auto;
				margin-top: 100px;
			}
			.tab {
				border: 1px solid #ddd;
				border-bottom: 0;
				height: 36px;
				width: 320px;
			}
			.tab li {
				position: relative;
				float: left;
				width: 80px;
				height: 27px;
				line-height: 27px;
				padding-bottom: 7px;
				text-align: center;
				cursor: pointer;

			}
			.products {
				width: 1002px;
				padding: 10px 0;
				border: 1px solid #DDDDDD;
				height: 476px;
			}
			.products .main {
				float: left;
				display: none;
			}
			.products .main.selected{
				display: block;
			}
			.tab li.active{
				border-color:red ;
				border-bottom: 3px solid #2e8ae6;
			}
			/*负边距重叠 有丶东西啊*/
		</style>
	</head>
	<body>
		<div class="wrapper">
			<ul class="tab">
				<li class="tab-item active">标题1</li>
				<li class="tab-item">标题2</li>
				<li class="tab-item">标题3</li>
				<li class="tab-item">标题4</li>
			</ul>
			<div class="products">
				<div class="main">
					<span class="a">内容1</span>
				</div>
				<div class="main">
					<span class="a">内容2</span>
				</div>
				<div class="main">
					<span class="a">内容3</span>
				</div>
				<div class="main">
					<span class="a">内容4</span>
				</div>
			</div>
		</div>
		<script>
        $(function () {
            $(".wrapper .tab-item").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                //addClass添加样式 siblings 返回他的同胞元素（除了他自己） removeClass删除
                $(".products .main").eq($(this).index()).show().siblings().hide();
                //eq(n)该节点数组的第n个节点 属于获取节点
                //$(selector).index()返回该节点在同胞节点的位置 返回的是个number值
                //show()显示 siblings又是反选一次节点 再隐藏
                //由此看出 JQ操作dom节点的方式是一大片的操控 根据一个点操控一片节点再进行操作
            })
        })
   </script>
	</body>
</html>