<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <!-- 引进来了 -->

     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

     <title>Document</title>

     <style>

         .content{

             width: 80%;

             float: left;

             background-color: pink;

         }

         .content div{

             display: none;

         }

         .sideBar{

             width: 20%;

             float: left;

         }

         .content div.selected{

             display: block;

         }

     </style>

 </head>

 <body>

     <div class="sideBar">

         <ul class="nav nav-pills nav-stacked">

             <li role="presentation" class="active">

                 <a href="#">房源列表</a>

             </li>

             <li role="presentation">

                 <a href="#">我的申请</a>

             </li>

             <li role="presentation">

                 <a href="#">密码修改</a>

             </li>

         </ul>

     </div>

     <div class="content">

         <div class="content1 selected">第一段文本</div>

         <div class="content1">第二段文本</div>

         <div class="content1">第三短文本</div>

     </div>

     <script>

         $('.sideBar ul li').click(function(){

             $(this).addClass('active').siblings().removeClass('active');

             $('.content > div').eq($(this).index()).addClass('selected').siblings().removeClass('selected');

         })

     </script>

 </body>

 </html>

jquery实现的导航栏切换的更多相关文章

  1. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

  2. 极致精简的fragment实现导航栏切换demo

    一个小demo.用button+fragment实现导航栏切换界面,适合刚接触的新手看一下. 效果图 点击第二个后 源码: 主界面 <span style="font-size:18p ...

  3. Flutter - TabBar导航栏切换后，状态丢失

    上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...

  4. Flutter - BottomNavigationBar底部导航栏切换后，状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

  5. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  6. Flutter实战视频-移动电商-04.底部导航栏切换效果

    04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...

  7. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

  8. 【1-4】jQuery代码风格-导航栏

    实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

  9. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

随机推荐

  1. 如何得到WPF中控件绑定的EventTrigger

    System.Windows.Interactivity.Interaction.GetTriggers(sender as DependencyObject)[0].Actions

  2. 物联网项目开发必读 深度分析MQTT协议优缺点

    物联网并不仅仅是一种网络,而是一个新的生态环境,它描述的本质是越来越多的使用物品通过网络连接在一起并可使用单个或者多个的终端设备对它们进行各种控制和使用—当然,工业上的物联网通常连接到的石鼓传感器或者 ...

  3. LWIP的底层结构（物理层）

    LWIP的底层结构(物理层) 转自:http://bluefish.blog.51cto.com/214870/158418 我们前面讲到说是ip层的发送和接收都是直接调用了底层,也就是设备驱动层的函 ...

  4. KMP匹配

    字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另一个字符串"ABCDABD" ...

  5. 【旧文章搬运】VC插件中如何获取当前工程的工作目录

    原文发表于百度空间,2014-09-24========================================================================== 好难找的资 ...

  6. <正则吃饺子> ：关于oracle 中 exists 、not exists 的简单使用

    话不多说,简单的总结而已.网络上很多很详细介绍. 例如,博文:http://blog.csdn.net/zhiweianran/article/details/7868894  当然这篇也是转载的,原 ...

  7. BI 底座——数据仓库技术(Data Warehouse)

    在开始喷这个主题之前,让我们先看看数据仓库的官方定义: 数据仓库(Data Warehouse)是一个面向主题的(Subject Oriented).集成的(Integrate).相对稳定的(Non- ...

  8. 0005_Linux下的SSH连接操作

    1.启动SSH服务:service sshd start 2.开机自动启动SSH:chkconfig sshd on 3.获取Linux的ip地址:ifconfig 4.连接Linux的SSH:打开x ...

  9. struts2+jquery+easyui+datagrid+j…

    一.概述 struts2提供了针对json的插件支持.常规来讲我们将如何将对象数组转成json对象在客户端直接调用呢?尤其和jquery的easyui插件配合使用,这个可能会有很多的问题需要我们解决. ...

  10. 剑指Offer的学习笔记（C#篇）-- 连续子数组的最大和

    题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...