<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>

  <meta charset="utf-8">

    <style>

    a { text-decoration: none;  color: #000;  line-height: 2em; }

    ul { list-style:none;  padding: 0 0 0 20px; }

    .affix { float: left;  border: 1px solid #aaa;  width: 150px; }

    .affix  .active  a{ color: #e4393c;  font-weight: bold; }

    .container { float: left;  width: 550px;  min-height: 400px;  border: 1px solid #aaa; }

    .container .box { display: none;  min-height: 300px;  }

    .container .box.active { display: block; }

    </style>

 </head>

 <body>

  <h1>练习：查找元素&操作元素</h1>

    <h3>使用附加导航(affix)实现内容切换</h3>

    <div class="affix">

        <ul>

            <li><a data-toggle="item" href="#my-order">我的订单</a></li>

            <li class="active"><a data-toggle="item" href="#user-setting">用户设置</a></li>

            <li><a data-toggle="item" href="#account-security">账户安全</a></li>

        </ul>

    </div>

    <div class="container">

        <div id="my-order" class="box" style="background:#fee">我的订单的详细内容</div>

        <div id="user-setting" class="box active" style="background:#efe">用户设置的详细内容</div>

        <div id="account-security" class="box" style="background:#eef">账户安全的详细内容</div>

    </div>

  <script src="js/jquery-1.11.3.js"></script>

  <script>

    //让所有data-toggle为item的元素都能响应单击事件

    $("div.affix>ul").on(

      "click","[data-toggle='item']",function(e){

      //获得目标元素封装为jQuery对象

      var $target=$(e.target);

      //如果当前a的父元素不是active的

      if(!$target.parent().hasClass("active")){

        //获得当前a的父元素的所有兄弟中class为active的，移除其active类

        $target.parent()

               .siblings(".active")

               .removeClass("active");

        //为当前a的父元素添加active类

        $target.parent().addClass("active");

        //获得当前a的href属性,保存在变量selector中

        //使用selector查找div，为其添加active类，再查找其所有兄弟中class为active的移除active类

        $($target.attr("href"))

          .addClass("active")

          .siblings(".active")

          .removeClass("active");

      }

    });

  </script>

 </body>

</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. struts.enable.DynamicMethodInvocation = true 动态方法调用

    default.properties 在Struts 2的核心jar包-struts2-core中,有一个default.properties的默认配置文件.里面配置了一些全局的信息,比如: stru ...

  2. swift中类似宏定义

    建一个类 如,在Contans.swift中 import UIKit let kMAIN_SIZE = UIScreen.mainScreen().bounds 在其他地方直接用 比如在 MyTab ...

  3. Illustrator软件中eps和ai格式的区别

    转自Illustrator软件中eps和ai格式的区别 AI是ILL特有的格式,EPS格式是在排版领域经常使用的格式.AI中的位图图像是用链接的方式存储,EPS格式则将位图图像包含于文件中.对于含有相 ...

  4. LeetCode 面试:Add Two Numbers

    1 题目 You are given two linked lists representing two non-negative numbers. The digits are stored in ...

  5. 通过Delphi获得qq安装路径

    procedure TForm1.Button2Click(Sender: TObject); var Reg:TRegistry; Val:TStrings; ii:System.Integer; ...

  6. SQL语句 远程操作数据库

    --远程操作数据库SQL语句exec sp_addlinkedserver 'ITSV ', ' ', 'SQLOLEDB ', '211.81.251.85 'exec sp_addlinkedsr ...

  7. 2015第45周五IE11实用开发工具摘录及设置IE缓存

    UI响应工具的作用 UI响应工具顾名思义就是查看UI响应时间的工具,通过这个工具可以帮助我们确定应用中的哪些组件占用了多少CPU时间,让我们之后可以更有针对性的进行优化,从而最大限度地改善应用性能,同 ...

  8. Microsoft JScript 运行时错误: Automation 服务器不能创建对象

           var WshShell = new ActiveXObject('WScript.Shell')         WshShell.SendKeys( '{F11}');   问题: ...

  9. javascipt取整数四舍五入

    1.丢弃小数部分,保留整数部分 parseInt(5/2) 2.向上取整,有小数就整数部分加1 Math.ceil(5/2) 3,四舍五入. Math.round(5/2) 4,向下取整 Math.f ...

  10. leetcode shttps://oj.leetcode.com/problems/surrounded-regions/

    1.从外围搜索O,深度搜索出现了 Line 35: java.lang.StackOverflowError Last executed input: ["OOOOOOOOOOOOOOOOO ...