选项卡效果 | w晚风

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		*{padding: 0;margin: 0;}
	    ul li{
	    	float: left;
	    	list-style: none;
	    	background: #777777;
	    }
	    ul li a{
	    	text-align: center;
	    	color: #FEFFF9;
	    	cursor: pointer;
	    	display: block;
	    	padding: 10px 10px;
	    }
	    div{
	    	background: #840202;
	    }
	    div p{
	    	text-align: center;
	    	color: #FEFFF9;
	    }
	</style>
	<script src="../js/jquery-1.12.2.min.js"></script>
</head>
<body>
	<ul>
		<li>
			<a>选项一</a>
			<div>
				<p>选项一</p>
				<p>选项二</p>
				<p>选项三</p>
				<p>选项四</p>
			</div>
		</li>
		<li>
			<a>选项二</a>
			<div>
				<p>选项一</p>
				<p>选项二</p>
				<p>选项三</p>
				<p>选项四</p>
			</div>
		</li>
		<li>
			<a>选项三</a>
			<div>
				<p>选项一</p>
				<p>选项二</p>
				<p>选项三</p>
				<p>选项四</p>
			</div>
		</li>
		<li>
			<a>选项四</a>
			<div>
				<p>选项一</p>
				<p>选项二</p>
				<p>选项三</p>
				<p>选项四</p>
			</div>
		</li>
	</ul>
</body>
</html>

第一种js

<script>
		$("div").hide();
		$("li").click(function(){
			$("li").css("background-color","#777777");//先设置全部li背景颜色为相同的颜色
			$(this).css("background-color","red");//鼠标点击的那个li为红色
			$("div").hide();//隐藏所有的  div
			$(this).children("div").show();//显示被点击的li下的子节点div
		})
	</script>

第二种js

<script>
		$("div").hide();
		$("li").click(function(){
			$("li").css("background-color","#777777");//先设置全部li背景颜色为相同的颜色
			$(this).css("background-color","red");//鼠标点击的那个li为红色
			$("div").hide();//隐藏所有的  div
			var i = $(this).index();//获得被点击的li下标索引
			$("div").eq(i).show();//根据对应的div索引显示对应的div
//			$("div:eq("+i+")").show();//根据对应的div索引显示对应的div
		})
	</script>

第三种js

<script>
		$("li").click(function(){
			$("li").css("background-color","#777777");//先设置全部li背景颜色为相同的颜色
			$(this).css("background-color","red");//鼠标点击的那个li为红色
			$("p").css("background","");
		    var i=$(this).data("index");//获得自定义属性值
		    $("p").eq(i).css("background","red");//根据自定义属性值显示对应P下标的样式
		})
	</script>

第四种js

<script>
		$("li").click(function(){
			$("li").css("background-color","#777777");//先设置全部li背景颜色为相同的颜色
			$(this).css("background-color","red");//鼠标点击的那个li为红色
			$("p").css("background","");
		    var i=$(this).attr("data-index");//通过 attr 获得自定义属性值   
		    $("p").eq(i).css("background","red");//根据自定义属性值显示对应P下标的样式
		})
	</script>

第五种js

<script>
		$("li").prop("i",function(index){
			return index;
		})
	
		$("li").click(function(){
			$("li").css("background-color","#777777");//先设置全部li背景颜色为相同的颜色
			$(this).css("background-color","red");//鼠标点击的那个li为红色
		    var i=$(this).prop("i");
		    $("p").eq(i).css("background","red").siblings().css("background","");//siblings() 筛选出不包括本身的所有兄弟元素
		})
	</script>

第六种js

<script type="text/javascript">
		var li=document.getElementsByTagName("li");
		var p=document.getElementsByTagName("p");
		
		for (var i=0;i<li.length;i++) {
			//立即执行函数   每次调用都释放 不会产生闭包  在里面可以获得点击的下标值
			(function(a){
				li[a].addEventListener("click",function(){
					//每次循环初始化 li 标签背景颜色
					for (var j=0;j<li.length;j++) {
						li[j].style.background="#777777";
					}
					li[a].style.background="red";
					
					//每次循环初始化p标签背景颜色
					for (var j=0;j<p.length;j++) {
						p[j].style.background="";
					}
					//根据li下标值 对应p的下标值改变背景颜色
					p[a].style.background="red";
				})
			}(i))
		}
	</script>

第七种js

<script type="text/javascript">
		//获取li下的a节点
		var btn = document.getElementsByTagName("a");
		//获取ul下的 li节点
	    var li = document.getElementsByTagName("li");
	    //获取li 下的div节点
	    var div = document.getElementsByTagName("div");
	   
	    for(var i=0;i<li.length;i++){
			li[i].onclick=function(){
				//当我再次点击的时候循环清空所以的样式
				for (var j=0;j<btn.length;j++) {
					btn[j].className="";
				}
				//鼠标点击指定li下面的a标签添加样式
				this.getElementsByTagName("a")[0].className="acitve";
				
			    //隐藏项
				//每次点击div清空一次样式
				for (var k=0;k<div.length;k++) {
					div[k].className="";
				}
				//指定li 下 的第一个div添加 acitve2 类名
				this.getElementsByTagName("div")[0].className="acitve2";	
			}
		}
	</script>