切换效果
$("button").click(function() {
$(this).toggleClass("p")//获取p下标
var index=$(this).index();
$("p").eq(index).show(500)//显示p
$("p").eq(index).siblings().hide(500)//隐藏其他p
})代码段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<style type="text/css">
button {
width: 150px;
height: 80px;
line-height: 80px;
font-size: 25px;
text-align: center;
border: none;
background-color: white;
float: left;
margin-left: 50px;
}
div {
width: 500px;
}
p {
width: 500px;
height: 500px;
line-height: 500px;
text-align: center;
border: 1px solid red;
font-size: 40px;
float: left;
margin-top: 50px;
margin-left: 200px;
display: none;
}
p:nth-of-type(1) {
display: block;
}
.test {
border: 1px solid plum;
border-radius:20px ;
}
</style>
</head>
<body>
<button>动态组件一</button>
<button>动态组件二</button>
<button>动态组件三</button>
<button>动态组件四</button>
<div>
<p>组件一</p>
<p>组件二</p>
<p>组件三</p>
<p>组件四</p>
</div>
<script src="../../JS/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
//边框效果
$("button").hover(function() {
$(this).toggleClass("btn")
var index=$(this).index();
console.log(index);
$("button").eq(index).toggleClass("test");//追加样式
})
//显示隐藏
$("button").click(function() {
$(this).toggleClass("p")
var index=$(this).index();
$("p").eq(index).show(500)
$("p").eq(index).siblings().hide(500)
})
})
</script>
</body>
</html>
