<!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>
网友评论