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个小的选 ...
随机推荐
- 七、angularjs 倒计时
使用定时器时离开页面需要清除定时器,清除的方法有两种分别针对页面有缓存和没有缓存 1.页面有缓存 2.页面没有缓存 angularjs倒计时首先需要注入:$interval 60s倒计时 vm.sec ...
- ElasticSearch初体验之使用
好久没写博文了, 最近项目中使用到了ElaticSearch相关的一些内容, 刚好自己也来做个总结.现在自己也只能算得上入门, 总结下自己在工作中使用Java操作ES的一些小经验吧. 本文总共分为三个 ...
- bootstrap-table 分页增删改查之一（分页）
记录一下 bootstrap-table插件的使用 先看下效果图 首先是导入js <!--js jquery --> <script type="text/javascri ...
- 毕向东_Java基础视频教程第20天_IO流（7~10）
第20天-07-IO流(递归) package bxd; import java.io.File; public class FileDemo3 { // 非递归打印 public static vo ...
- 在 Azure 虚拟机中配置 Always On 可用性组（经典）
在开始之前,请先假设现在可以在 Azure Resource Manager 模型中完成此任务. 我们建议使用 Azure Resource Manager 模型来进行新的部署. 请参阅 Azure ...
- linux-软件下载安装
RPM 安装 rpm -ivh 包全名 :-i(install):安装:-v(verbose):显示详细信息:-h(hash):显示进度: rpm -Uvh 包全名:-U(upgrate):升级 rp ...
- cocos2dx中node的pause函数（lua）
time:2015/05/14 描述 lua下使用node的pause函数想暂停layer上的所有动画,结果没有效果 1. pause函数 (1)cc.Node:pause 代码: void Node ...
- IPv4地址结构体sockaddr_in详解
sockaddr_in结构体定义 struct sockaddr_in { sa_family_t sin_family; //地址族(Address Family) uint16_t sin_por ...
- matlab 黑白格子
有一个生成黑白格子的函数 40 这个参数是改变大小的 img=checkerboard(40)<0.5; figure; imshow(img,[])
- MTK 官方 openwrt SDK 使用
来源 1.https://github.com/unigent/openwrt-3.10.14 上面有个 问题:SDK 缺少 linux-3.10.14-p112871.tar.xz 在 http ...