active动态添加

我写的代码比较简单,但是对于前端初级工程师有些帮助:查看路径  实际效果如下


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
<title></title>
</head>
<body>
<div class="title">
<div id="index" class="one">页面1
<div class="two">展示信息1</div>
</div>
<div id="zf" class="one">页面2
<div class="two">展示信息2</div>
</div>
<div id="gc" class="one">页面3
<div class="two">展示信息3</div>
</div>
<div id="hc" class="one">页面4
<div class="two">展示信息4</div>
</div>
<div id="shwt" class="one">页面5
<div class="two">展示信息5</div>
</div>
</div>
</body>
<script type="text/javascript" src="./jquery.min.js"></script>
<script>
$(".one").on('click',function(){
$(".active").find(".two").hide();
$(this).addClass("active").siblings().removeClass("active");
$(".active").find(".two").show();
})
</script>
</html>

猜你喜欢

转载自blog.csdn.net/zxmin1302/article/details/79220760