1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <title> new document </title>
  5.   <meta charset="utf-8">
  6.     <style>
  7.     a { text-decoration: none;  color: #000;  line-height: 2em; }
  8.     ul { list-style:none;  padding: 0 0 0 20px; }
  9.     .affix { float: left;  border: 1px solid #aaa;  width: 150px; }
  10.     .affix  .active  a{ color: #e4393c;  font-weight: bold; }
  11.     .container { float: left;  width: 550px;  min-height: 400px;  border: 1px solid #aaa; }
  12.     .container .box { display: none;  min-height: 300px;  }
  13.     .container .box.active { display: block; }
  14.     </style>
  15.  </head>
  16.  <body>
  17.   <h1>练习：查找元素&操作元素</h1>
  18.     <h3>使用附加导航(affix)实现内容切换</h3>
  19.  
  20.     <div class="affix">
  21.         <ul>
  22.             <li><a data-toggle="item" href="#my-order">我的订单</a></li>
  23.             <li class="active"><a data-toggle="item" href="#user-setting">用户设置</a></li>
  24.             <li><a data-toggle="item" href="#account-security">账户安全</a></li>
  25.         </ul>
  26.     </div>
  27.  
  28.     <div class="container">
  29.         <div id="my-order" class="box" style="background:#fee">我的订单的详细内容</div>
  30.         <div id="user-setting" class="box active" style="background:#efe">用户设置的详细内容</div>
  31.         <div id="account-security" class="box" style="background:#eef">账户安全的详细内容</div>
  32.     </div>
  33.   <script src="js/jquery-1.11.3.js"></script>
  34.   <script>
  35.     //让所有data-toggle为item的元素都能响应单击事件
  36.     $("div.affix>ul").on(
  37.       "click","[data-toggle='item']",function(e){
  38.       //获得目标元素封装为jQuery对象
  39.       var $target=$(e.target);
  40.       //如果当前a的父元素不是active的
  41.       if(!$target.parent().hasClass("active")){
  42.         //获得当前a的父元素的所有兄弟中class为active的，移除其active类
  43.         $target.parent()
  44.                .siblings(".active")
  45.                .removeClass("active");
  46.         //为当前a的父元素添加active类
  47.         $target.parent().addClass("active");
  48.         //获得当前a的href属性,保存在变量selector中
  49.         //使用selector查找div，为其添加active类，再查找其所有兄弟中class为active的移除active类
  50.         $($target.attr("href"))
  51.           .addClass("active")
  52.           .siblings(".active")
  53.           .removeClass("active");
  54.       }
  55.     });
  56.   </script>
  57.  </body>
  58. </html>

使用附加导航(affix)实现内容切换的更多相关文章

  1. Bootstrap 附加导航(Affix)插件

    bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写

  2. bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.

    affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...

  3. Bootstrap Affix(附加导航（Affix）插件的用法)

    原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...

  4. 附加导航（Affix）行为

    用法 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可.请使用偏移来定义何时切换元素的锁定和移动. ...

  5. Bootstrap-Plugin：附加导航（Affix）插件

    ylbtech-Bootstrap-Plugin:附加导航(Affix)插件 1.返回顶部 1. Bootstrap 附加导航(Affix)插件 附加导航(Affix)插件允许某个 <div&g ...

  6. Bootstrap 附加导航（Affix）插件

    附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不 ...

  7. jQuery实现页面导航内容定位效果，并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  8. 第二百四十九节，Bootstrap附加导航插件

    第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一．附加导航 注意:此插件要使用 bootstrap3.0. ...

  9. Bootstrap 学习笔记13 附加导航插件

    附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...

随机推荐

  1. 使用PHP生成二维码的两种方法(带logo图像)

    一.利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  2. Android 进入另外一个窗体的两种方法

    方法一: Intent intent = new Intent(); intent.setClassName(this, "com.wuyou.twoactivity.OtherActivi ...

  3. JVM相关参数配置和问题诊断<转>

    原文连接:http://blog.csdn.net/chjttony/article/details/6240457 1.Websphere JVM相关问题诊断: 由JVM引起的Websphere问题 ...

  4. 【HDU3440】House Man （差分约束）

    题目: Description In Fuzhou, there is a crazy super man. He can’t fly, but he could jump from housetop ...

  5. Linux Shell编程（21）——复杂命令

    更高级的用户命令find-exec COMMAND \;在每一个find 匹配到的文件执行 COMMAND 命令. 命令序列以 ; 结束( ";" 是 转义符 以保证 shell ...

  6. HTMLTestRunner生成空白resault.html

    发现一奇葩问题,用idle或pyscripter执行脚本,生成的是空白html,通过cmd,进入脚本目录执行python xx.py,却能生成测试报告. HTMLTestRunner 例子 #codi ...

  7. Linux学习笔记23——取消线程

    一 相关函数 1 发送终止信号 #include <pthread.h> int pthread_cancel(pthread_t thread); 2 设置取消状态 #include & ...

  8. 游戏开发设计模式之命令模式（unity3d 示例实现）

    博主才学尚浅,难免会有错误,尤其是设计模式这种极富禅意且需要大量经验的东西,如果哪里书写错误或有遗漏,还请各位前辈指正. 打 算写设计模式的目的就是,首先自己可以理清思路,还有就是国内的设计模式资料很 ...

  9. ASP.NET MVC 中＠Html.Partial，＠Html.Action，＠Html.RenderPartial，＠Html.RenderAction差别

    使用方法:@Html.Action(action, controller)加载局部页面.例如在模板页中使用:@Html.Action("Contact", "Compan ...

  10. Django中的Form（二）

    一.保存用户输入内容 如果用户输入一张表单提交后出现错误时,会出现重现填写的情况.我们可以把用户输入的信息保存下来,并返回到前台页面,这样用户就无需再次输入. views.py # coding:ut ...