jquery实现的导航栏切换
<!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实现的导航栏切换的更多相关文章
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
- 极致精简的fragment实现导航栏切换demo
一个小demo.用button+fragment实现导航栏切换界面,适合刚接触的新手看一下. 效果图 点击第二个后 源码: 主界面 <span style="font-size:18p ...
- Flutter - TabBar导航栏切换后，状态丢失
上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...
- Flutter - BottomNavigationBar底部导航栏切换后，状态丢失
如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
- jquery侧边折叠导航栏制作，两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
- Flutter实战视频-移动电商-04.底部导航栏切换效果
04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
- 【1-4】jQuery代码风格-导航栏
实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...
- Jquery实现动态导航栏和轮播导航栏
动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...
随机推荐
- java代码优化（1）---
代码的优化,需要考虑的维度很多.但是代码的优化并不是减少代码量,有的时候我们需要增加代码来提高代码的可读性. 1.正确标记变量 2.封装某个动作 3.注意函数的写法 4.不容易理解的东西,加注释
- 使用BIND安装智能DNS服务器（二）---配置rndc远程控制
首先两个BIND DNS服务器要正常运行. 主DNS服务器IP:192.168.1.100 客户机DNS服务器IP:192.168.1.101 1 主DNS端配置: cd /etc/ 生成 ...
- go开发环境搭建及开发工具简介
go语言包的下载地址:https://www.golangtc.com/download 这里以window10的操作系统环境为例 go的开发工具下载地址:https://www.golangtc.c ...
- Android图片压缩框架-Tiny 集成
为了简化对图片压缩的调用,提供最简洁与合理的api压缩逻辑,对于压缩为Bitmap根据屏幕分辨率动态适配最佳大小,对于压缩为File优化底层libjpeg的压缩,整个图片压缩过程全在压缩线程池中异步压 ...
- HighChar
chart: { type:'bar', borderWidth:2, borderColor: '#CA5100', backgroundColor: '#90ED7D', shadow: { // ...
- window.onerror 捕捉所有的前端error
//[捕捉所有前端error] window.onerror = function (errormessage, url, line, column, error) { console.log(&qu ...
- ue4 简单数据储存
- cf822C(贪心)
题目链接: http://codeforces.com/problemset/problem/822/C 题意: 有n条线段(n<=2e5) 每条线段有左端点li,右端点ri,价值cost(1 ...
- 分层确定性钱包开发的代码实现（HD钱包服务）
HD Wallets的全称是Hierachical Deterministic Wallets, 对应中文是 分层确定性钱包. 这种钱包能够使用一组助记词来管理所有的账户的所有币种,在比特币的BIP3 ...
- 洛谷P1602 Sramoc问题
P1602 Sramoc问题 题目描述 话说员工们整理好了筷子之后,就准备将快餐送出了,但是一看订单,都傻眼了:订单上没有留电话号码,只写了一个sramoc(k,m)函数,这什么东西?什么意思?于是餐 ...