<!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. Lagom学习 （三）

    lagom代码中有大量的Lambda表达式,首先补习一下lambda表达式和函数式接口的相关知识. 一: 函数式接口: 函数式接口其实本质上还是一个接口,但是它是一种特殊的接口: 这种类型的接口,使得 ...

  2. Lagom学习 五 Hello world工程

    用Maven创建一个Hello world的Lagom工程: 1: 在想创建工程的目下下,打开CMD 2:  mvn archetype:generate -Dfilter=com.lightbend ...

  3. JMETER 定时器 之 常数吞吐量定时器

    定时器: 默认情况下,Jmeter线程在发送请求之间没有间歇.建议为线程组添加某种定时器,以便设定请求之间应该隔多长时间.如果测试人员不设定这种延迟,Jmeter可能会在短时间内产生大量访问请求,导致 ...

  4. [hdu2544]最短路spfa

    解题关键:最短路模板一直没整理过,这里整理了一下spfa+链式前向星建图的最短路模板,以后网络赛省的打了. spfa算法的关键就是松弛操作,只有进行松弛操作,其后的点距离才可能被更新. #includ ...

  5. [xdoj1216]子树第k小(dfs序+主席树)

    解题关键:dfs序将树映射到区间,然后主席树求区间第k小,为模板题. #pragma comment(linker, "/STACK:1024000000,1024000000") ...

  6. 后缀数组dc3算法模版（待补）

    模版: ; #define F(x) ((x)/3+((x)%3==1?0:tb)) #define G(x) ((x)<tb?(x)*3+1:((x)-tb)*3+2) int wa[maxn ...

  7. 面试总结hashmap

    考点: 1.hashing的概念 2.HashMap中解决碰撞的方法 3.equals()和hashCode()的应用,以及它们在HashMap中的重要性 4.不可变对象的好处 5.HashMap多线 ...

  8. BDBR vs BDPSNR 计算方法 （转载）

    转自:http://blog.csdn.net/menyangyang/article/details/42874575

  9. cshtml 获取session值

    在 cshtml 中,我们如何获取 session 的呢? 首先我们先设置 session 值,我们一般都会在 Controller 设置 session. Session["isAdmin ...

  10. Oracle数据库恢复之resetlogs

    实验环境:RHEL 5.4 + Oracle 11.2.0.3 如果是一名合格的Oracle DBA,对resetlogs这种关键字都应该是极其敏感的,当确认需要这种操作时一定要三思而后行,如果自己不 ...