1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <!-- 引进来了 --> 9 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 10 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 11 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 12 <title>Document</title> 13 <style> 14 .content{ 15 width: 80%; 16 float: left; 17 background-color: pink; 18 } 19 .content div{ 20 display: none; 21 } 22 .sideBar{ 23 width: 20%; 24 float: left; 25 } 26 .content div.selected{ 27 display: block; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="sideBar"> 33 <ul class="nav nav-pills nav-stacked"> 34 <li role="presentation" class="active"> 35 <a href="#">房源列表</a> 36 </li> 37 <li role="presentation"> 38 <a href="#">我的申请</a> 39 </li> 40 <li role="presentation"> 41 <a href="#">密码修改</a> 42 </li> 43 </ul> 44 </div> 45 46 <div class="content"> 47 <div class="content1 selected">第一段文本</div> 48 <div class="content1">第二段文本</div> 49 <div class="content1">第三短文本</div> 50 </div> 51 <script> 52 $('.sideBar ul li').click(function(){ 53 $(this).addClass('active').siblings().removeClass('active'); 54 $('.content > div').eq($(this).index()).addClass('selected').siblings().removeClass('selected'); 55 }) 56 </script> 57 </body> 58 </html>
jquery实现的导航栏切换
猜你喜欢
转载自www.cnblogs.com/miacara94/p/8967101.html
今日推荐
周排行