Chinaunix首页 | 论坛 | 博客

学习 Linux

首页　| 　博文目录　| 　关于我

redsong

  • 博客访问： 7681
  • 博文数量： 14
  • 博客积分： 10
  • 博客等级： 民兵
  • 技术积分： 150
  • 用 户 组： 普通用户
  • 注册时间： 2011-02-25 22:56
文章分类

全部博文（14）

推荐博文
点击不同的菜单 出现不同的div

分类： jQuery

2014-08-24 21:27:53



是一个网友希望实现的功能。


点击(此处)折叠或打开

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <!-- 新 Bootstrap 核心 CSS 文件 -->
  7. <link rel="stylesheet" href="">

  9. <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  10. <link rel="stylesheet" href="">

  12. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  13. <script src=""></script>

  15. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16. <script src=""></script>

  18. <style type="text/css">
  19. .div_all div{
  20.     width:200px;
  21.     height:120px;
  22.     border:1px solid #CCC;
  23.     display:none;

  25.     }
  26. .ul_1 li{
  27.     cursor:pointer;
  28.     }

  30. .class_1{
  31.     color:#f00;}
  32. </style>
  33. </head>
  34. <body>
  35. <div class="row">
  36.     <div class="col-md-6 col-md-offset-3">
  37.         <ul class="ul_1">
  38.             <li id="li_1">菜单1</li>
  39.             <li id="li_2">菜单2</li>
  40.             <li id="li_3">菜单3</li>
  41.             <li id="li_4">菜单4</li>
  42.         </ul>
  43.     </div>
  44. </div>
  45. <div class="row">
  46.     <div class="col-md-6 col-md-offset-3 div_all">
  47.         <div id="div_1" style="display:block">内容1</div>
  48.         <div id="div_2">内容2</div>
  49.         <div id="div_3">内容3</div>
  50.         <div id="div_4">内容4</div>
  51.     </div>
  52. </div>



  56. <script>
  57. $(document).ready(function(){    
  58.     $(document).on('click','.ul_1 li',function(){
  59.         $('.ul_1 li').removeClass('class_1');                    //所有的li变黑色
  60.         $(this).addClass('class_1');                        //点了谁，谁变红色
  61.         var id = $(this).attr('id');                        //点了谁?
  62.         var div_name = '#div_' + id.split("_")[1];            //点的这个的id是多少(顺便前边加上 #div_)
  63.         $(".div_all").find('div').css('display','none');    //所有的div都藏起来
  64.         $(div_name).css('display','block');                    //点了谁，把对应id的div显示出来
  65.     });    
  66. });
  67. </script>
  68. </body>
  69. </html>


阅读(198) | 评论(0) | 转发(0) |
0

上一篇：鼠标移动到眼睛上显示密码 移走恢复密码

下一篇：一个复选框控制多个复选框

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6