<!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. 支付宝集成SDK 报错

    1.打开Demo中的错误 这是路径错误导致 解决办法:在Build Settings 中找到 Library Search Paths ,去掉其中的 /// 2.自己集成支付宝SDK时的错误 这个也是 ...

  2. matlab的常用快捷键

    ctrl+shift+d:控制窗口嵌入还是非嵌入

  3. hadoop 异常处理实例（一）hadoop内存配置项

    Exception in thread "main" java.io.IOException: Job failed! at org.apache.hadoop.mapred.Jo ...

  4. dispatch_semaphore

    dispatch_semaphore 信号量基于计数器的一种多线程同步机制.在多个线程访问共有资源时候,会因为多线程的特性而引发数据出错的问题. dispatch_queue_t queue = di ...

  5. Eclipse中Android公共库的正确建立及调用方法

    Eclipse中Android公共库的正确建立及调用方法 引言 之前一直头痛于没有办法在多个程序中共享资源,用作公共类库的方法也是使用的导出jar再导入的办法,现在终于初步搞明白了,可算解脱了~,分享 ...

  6. 转-[Python 学习]2.5版yield之学习心得

    在 shhgs 发布了关于< Py 2.5 what’s new 之 yield>之后,原来我不是特别关注 yield 的用法,因为对于2.3中加入的yield相对来说功能简单,它是作为一 ...

  7. 【HDU2222】Keywords Search（AC自动机）

    Problem Description In the modern time, Search engine came into the life of everybody like Google, B ...

  8. 报错java.net.SocketException: Software caused connection abort: recv failed 怎么办

    产生这个异常的原因有多种方面,单就如 Software caused 所示, 是由于程序编写的问题,而不是网络的问题引起的. 已知会导致这种异常的一个场景如下: 客户端和服务端建立tcp的短连接,每次 ...

  9. Delphi的Owner与Parent可以不一致，而且Owner不是必须存在（一共7个问题） good

    问题1:Owner与Parent不一致:新建一个Form,上面放一个Button1,一个Panel1,然后在Panel1上再放一个Button2,测试结果:procedure TForm1.Butto ...

  10. Scanner 与 Readable 的read()方法

    Readable接口中的read()方法实现了将字符串读入charBuffer中,但是只有在需要输出的时候才会调用. Scanner是文本扫描器类,利用Scanner扫描并输出charBuffer中的 ...