<!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. C#(asp.net)备份还原mssql数据库代码【转】

    采集自互联网,未验证..... 如果我们使用虚拟主机为网站空间,这时如果需要备份和还原msssql数据库是非常麻烦,如果在网站后台管理当中加入对msssql数据库的操纵,可以使我们对数据库的备份和还原 ...

  2. python 文件及文件夹操作

    python 文件.目录操作(新增.移动.删除等) python 文件夹与文件操作 mport string, os, sys dir = '/var' print '----------- no s ...

  3. xstream 别名的用法<转>

    1.xstream的alias使用方法: 1.1 作用:将序列化中的类全量名称,用别名替换. 1.2  使用方法:xstream.alias("blog", Blog.class) ...

  4. 算术编码JM实现

    h.264标准中,CABAC的算术编码部分(9.3.4)只是一个参考,实际编码器中并不一定会按照它来实现,像JM中就有自己的算术编码实现方案. 在上篇文章CABAC中有详细的算术编码描述,在了解算术编 ...

  5. gridview数据导出到word和excel以及excel的导入

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  6. QSplashScreen开机画面（不断的repaint）

    QApplication a(argc, argv);    QPixmap pixmap(":/Image/start.png");//绑定启动图片    QSplashScre ...

  7. [LeetCode#159] Missing Ranges Strobogrammatic Number

    Problem: Given a string, find the length of the longest substring T that contains at most 2 distinct ...

  8. 数据结构（主席树）:HZOI 2016 采花

    [题目描述] 给定一个长度为n,包含c种颜色的序列,有m个询问,每次给出两个数l,r,表示询问区间[l,r]中有多少种颜色的出现次数不少于2次. 本题强制在线,对输入的l,r进行了加密,解密方法为: ...

  9. .net开源工作流引擎ccflow

    关于济南驰骋信息技术有限公司的.net开源工作流引擎 驰骋工作流引擎,工作流程管理系统:简称ccflow,驰骋一体化解决方案简称ccport. ccflow是济南驰骋信息技术有限公司向社会提供的一款1 ...

  10. HDOJ/HDU 2567 寻梦(字符串简单处理)

    Problem Description 每个人的童年都可能梦想过自己成为一个英雄,尤其是喜欢武侠的男生,Yifenfei也不例外. 童年的他常常梦想自己能成为一个绝世英雄,手拿一把灿灿发亮的宝剑,手挽 ...