当前位置: 首页 >> 冰斌棒18程序计划 >> jQuery实现左侧菜单栏点击显示内容【冰斌棒】 >> 正文

jQuery实现左侧菜单栏点击显示内容【冰斌棒】

1年前 (2018-01-30)     作者:冰斌棒     分类:冰斌棒18程序计划     阅读次数:382     评论(0)    
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  .outher{
   height: 1000px;
   width: 100%;
  }
  .menu{
   float: left;
   background-color: beige;
   width: 30%;
   height: 500px;
  }
  .content{
   float: left;
   background-color: #003655;
   width: 30%;
   height: 500px;
  }
  .title{
   background-color: aquamarine;
   line-height: 40px;
  }
  .hide{
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>
   <div>
    <div onclick="show(this)">菜单一</div>
    <div>
     <div>111</div>
     <div>111</div>
     <div>111</div>
    </div>
   </div>
   <div>
    <div onclick="show(this)">菜单二</div>
    <!-- 如果在class 中定义 两个的话,则可以对单个进行控制。 -->
    <div class="con hide">
     <div>111</div>
     <div>111</div>
     <div>111</div>
    </div>
   </div>
   <div>
    <div onclick="show(this)">菜单三</div>
    <div class="con hide">
     <div>111</div>
     <div>111</div>
     <div>111</div>
    </div>
   </div>
  </div>
  <div></div>
 </div>
 <script src="jquery-3.3.1.min.js"></script>
 <script>
  function show(self){
   //移出当前的下一个标签的 hide 装饰
   $(self).next().removeClass("hide");
   //将当前的 父亲 的 兄弟 的孩子 的 .con 修饰后添加 hide装饰。
   $(self).parent().siblings().children(".con").addClass("hide");
  }
 </script>
</body>
</html>


QQ截图20180130202755.png


冰斌棒博客

www.mybbzy.com


除非注明,发表在“冰斌棒博客”的文章『jQuery实现左侧菜单栏点击显示内容【冰斌棒】』版权归冰斌棒所有。 转载请注明出处为“本文转载于『冰斌棒博客』原地址http://www.mybbzy.com/?id=50

评论

发表评论   

昵称*

E-mail*(建议输入,以便收到博主回复的提示邮件)

网站