<!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. winfrom拷贝文件

    //File.Copy(@"C:\Users\Administrator\Pictures\bg.png", @"g:\images\bg.png", true ...

  2. 7 Tools for Data Visualization in R, Python, and Julia

    7 Tools for Data Visualization in R, Python, and Julia Last week, some examples of creating visualiz ...

  3. Netty高性能之道

    1. 背景 1.1. 惊人的性能数据 最近一个圈内朋友告诉我,通过使用Netty4 + Thrift压缩二进制编解码技术,他们实现了10W TPS(1K的复杂POJO对象)的跨节点远程服务调用.相比于 ...

  4. C/C++中的内存对齐 C/C++中的内存对齐

    一.什么是内存对齐.为什么需要内存对齐? 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定类型变量的时候经常在特 定的内存地址 ...

  5. 截断WM_SYSCOMMAND的SC_CLOSE命令（VC与Delphi双版本）

    WM_SYSCOMMAND - 系统命令消息,当点击最大化按钮,最小化按钮,关闭按钮等.都会收到这个消息.常用于窗口关闭时提示用户处理.WPARAM - 具体的命令,例如 关闭 SC_CLOSELPA ...

  6. WPF Application 执行顺序

    public static void Main() { ApplicationClass.App app = new ApplicationClass.App();app.InitializeComp ...

  7. android5.0中RecycleView的用法

    最近学习了android5.0中新增的一个组件RecycleView,是用来代替当前的listview开发的,是因为在RecycleView中已经有了viewholder缓存,并且不同的item之间可 ...

  8. bzoj3631

    其实这道题其实可以转化为这样一个问题 给定n-1对点,将这两点x,y间简单路径上的点(包括起点终点)权值+1 (最后再把除了起点外的点的权值-1,注意终点没糖吃) 求每个点的权值 首先想到的是先找LC ...

  9. 一起啃PRML - Preface 前言

    一起啃PRML - 前言 Preface @copyright 转载请注明出处 http://www.cnblogs.com/chxer/ PRML,Pattern Recognition and M ...

  10. solr异常--Expected mime type application/octet-stream but got text/html.

    Exception in thread "main" org.apache.solr.client.solrj.impl.HttpSolrServer$RemoteSolrExce ...