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)请求方法实 ...
随机推荐
- C# 深化基本概念
关于IDisposable的Dispose方法 .Net中GC会自动回收托管资源, 对于非托管资源应该使用Dispose方法. 在使用Dispose方法时,应注意避免在Dispose内部中继续释放托管 ...
- hadoop版本与支持的hbase版本对照…
hadoop版本与支持的hbase版本对照表 分类: hbase2013-05-20 17:19 701人阅读 评论(2) 收藏 举报 HbaseHadoop As of Hive 0.9.0 the ...
- linux 下消息队列发送后没有信息
在使用消息队列时,调用 #include <stdio.h> #include <stdlib.h> #include <string.h> #include &l ...
- 图解Mysql语句的执行过程
当我们希望Mysql能够高性能的执行查询语句时,其实最好的方法就是搞清楚Mysql到底是怎样执行查询的.一旦理解这一点,很多的查询优化工作实际上就是遵循一些原则让查询优化器能够按照预想的合理的方式运行 ...
- 2018上海大都会 J-Beautiful Numbers（数位dp-模未知）
J-Beautiful Numbers 链接:https://www.nowcoder.com/acm/contest/163/J 来源:牛客网 时间限制:C/C++ 8秒,其他语言16秒 空间限制: ...
- [Xcode 实际操作]六、媒体与动画-(15)使用AudioPlayer播放音乐
目录:[Swift]Xcode实际操作 本文将演示如何播放音频素材. 在项目名称上点击鼠标右键,弹出右键菜单, 选择[Add Files to "DemoApp"],往项目中导入文 ...
- pytest框架（一）
代码示例一 # coding=utf-8 def func(x): return x + 1 def test_answer(): assert func(3) == 5 运行结果 E:\pyYouY ...
- NOIp2013 火柴排队【逆序对/思维】 By cellur925
题目大意:给你两列数\(ai\)和\(bi\),你可以交换每列数中相邻的两个数,求一个最小交换次数使\(\sum_{i=1}^{n}(a_i-b_i)^2\) 最小. 最后满足条件的两个序列一定是各个 ...
- safari不支持new Date函数
最近在做移动Web的时候,在PC上用Chrome调试都成功了,但是在iPhone上真机一测就出现了奇怪的问题.经过一系列调试发现是日期相关的地方出现了问题.起初怀疑是生产环境的问题,但用Mac版的sa ...
- Django框架之MVT（2）
Django框架之MVT 1. MVT模型 - module:模型,和数据库相关的 - template:模板,存放html文件,模板语法(目的是将变量如果巧妙的嵌入到h ...