jQuery|简单tab栏切换
<!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">
<title>Document</title>
<link rel="stylesheet" href="./1.css">
<script src="./jquery-1.12.4.js"></script>
</head> <body>
<div class="box">
<div class="top-box">
<ul>
<li class="current">首页</li>
<li>多玩</li>
<li>17173</li>
<li>136</li>
<li>哈哈</li>
<li class="more"><a href="#">+更多+</a></li>
</ul>
<div class="move"></div>
</div>
<div class="content">
<div class="content-box">
<ul>
<li>
<a href="#">[全部]</a>
<a href="#" title="2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
</ul>
<ul>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
</ul>
<ul>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
</ul>
<ul>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
</ul>
<ul>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
<li>
<a href="#">[全部]</a>
<a href="#">2018 CJ Cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
<span>18/01</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Html
*{
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
a{
text-decoration: none;
}
body{
background-color: #ccc;
}
.box{
width: 380px;
height: 280px;
background-color: aliceblue;
margin: 50px auto;
padding: 10px 10px;
}
.top-box {
position: relative;
height: 30px;
border-bottom: 1px solid #ccc;
}
.top-box .current {
color:#ff8f17;
}
.top-box ul{
overflow: hidden;
}
.top-box ul li {
float: left;
margin-left:10px;
cursor: pointer;
}
.top-box ul .more {
margin-left:100px;
}
.top-box ul li a {
color:#ccc;
}
.move {
position: absolute;
left: 0px;
top: 29px;
width: 43px;
border-bottom: 1px solid #ff8f17;
}
.content {
position: relative;
height: 250px;
overflow: hidden;
}
.content-box {
position: absolute;
left: 0px;
top: 0px;
width: 2000px;
}
.content-box ul {
float: left;
}
.content-box ul li {
font-size: 12px;
line-height: 29px;
}
.content-box ul li a:nth-child(1){
color:#ccc;
}
.content-box ul li a:nth-child(2){
color:black;
margin-right: 10px;
}
.content-box ul li span {
margin-right: 10px;;
}
.content-box ul li a:nth-child(2):hover{
color:red;
}
Css
<script>
$(".top-box ul li").click(function () {
$(this).addClass("current").siblings().removeClass("current");
$(".top-box ul li").last().off();
var index = $(this).index();
$(".move").animate({ 'left': 8 + index * 42 + 'px' }, 300)
$(".content-box").animate({'left':0 + index * -390 + 'px'},300)
})
</script>
jQuery|简单tab栏切换的更多相关文章
- jQuery图片tab栏切换
<script> $(function(){ $('.tab li').mouseenter(function(){ var $this=$(this); var index=$this. ...
- jQuery简单tab按钮切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
- tab栏切换制作
tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
随机推荐
- 应用程序和Activity
Android 应用程序的组成部分 Android应用程序由各个组件组成,并使用Manifest绑定到一起,Manifest描述了每一个组件和它们之间的交互方式,还用于指定权限,硬件,平台以及应用程序 ...
- PHP把下划线分隔命名的字符串与驼峰式命名互转
最近项目使用symfony框架,这个框架对数据库的操作在这个团队里使用的是ORM进行操作,说实话使用ORM的开发效率和运行效率不一定高多少,到是它的实体命名和现有数据库字段的命名不太一样,ORM实体属 ...
- 微信小程序开发常见之坑
https://www.cnblogs.com/shunxing/articles/6971648.html input里的value会在浮层上面的,要解决这一问题还是很简单的,在小程序中input有 ...
- Ubuntu下Visual Studio Code的配置
最近在Ubuntu系统里用Visual Studio Code编写vue代码时,在build的时候老是报错,后来发现原来Visual Studio Code里默认Tab是4个空格,而vue代码要求ta ...
- 【 PostgreSQL】十条实用数据库SQL优化建议
基于PostgreSQL,总结几条常用的查询操作的优化建议,部分也适用于Oracle等数据库. 1.选择合适的分布键 分布键选择不当会导致重分布.数据分布不均等,而数据分布不均会使SQL集中在一个se ...
- 使用iCarousel的旋转木马效果请求图片
使用iCarousel的旋转木马效果请求图片 https://github.com/nicklockwood/iCarousel 先看看效果: 源码如下: // // RootViewControll ...
- Excel操作之级联菜单
设置级联菜单主要用的是excel的数据验证功能.下面以简单的设置城市选择框为例: 1.准备好数据 2.给所有省份起个名称(例如:省份),然后同样方法给每个省份所对应的城市以其省份命名,(例如:南京.苏 ...
- August 07th 2017 Week 32nd Monday
Life is just a series of trying to make up your mind. 生活只是由一系列下决心的努力所构成. Some people say it is not y ...
- [BZOJ 1588][HNOI 2002] 营业额统计
这果然是在那个没有STL的年代出的题 1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 16648 Solve ...
- Hdfs&MapReduce测试
Hdfs&MapReduce测试 测试 上传文件到hdfs 随意打开一个文件夹传一个文件试试(把javafx-src.zip传到hdfs的/根目录下):hadoop fs -put javaf ...