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个小的选 ...
随机推荐
- qt 拖放dropEvent
1.拖放操作分为两个截然不同的动作: 拖动和放下. 拖动通过 void dragEnterEvent(QDragEnterEvent * event); 来实现. 放下通过 void dropEven ...
- 自学git心得-3
转眼到第三节了,我们进入分支管理. git领域里的分支可以理解为一个有安全保障的临时仓库,有时我们新修改了代码,突然发现有bug需要回到之前的版本,有时我们开发到一半,突然要出去一趟,如何安全保存当前 ...
- mac自动生成路径问题
使用myBatis的逆向工程,一直无法生成.最后找同事帮忙,最终发现是 :路径前面少加一个反斜杠... 也就是 mac的绝对路径 前面需要加上 反斜杠.
- Visual Staudio 2015 打开指定文件,定位到指定文件目录下
Visual Staudio 2015 项目定位文件位置 每次使用的Visual Staudio 2015 写代码的时候总是打开了.cs文件或xaml文件时, 还要手动去找该 文件位置,每次都要翻好大 ...
- vue从安装到初始化项目
- The associated COM server does not support ActiveX Document embedding
winfrom 通过dsoframer实现读取excel文件报错: System.Reflection.TargetInvocationException: Exception has been th ...
- 装饰器( decorate )
装饰器分步解释-形成过程: #-*- coding: UTF-8 -*- #示例1: def deco(p_args): def pack(): print('haha,i am deco fun') ...
- 远程管理客户端--SCCM
远程控制客户端(设备--启动--远程控制): 1.将该用户在SCCM中赋予 远程工具操作人员 权限后,可以通过ccm控制台连接客户端,即可以使用远程控制工具 客户端设置策略设置--远程工具--管理远程 ...
- 解决网卡无法自动获取ip的办法
解决网卡无法自动获取IP址的方法 为了省钱或者一户多机,很多人都购买宽带路由器共享上网.在架设路由上网的时候,有些“师傅”可能不懂或是偷懒,开启了宽带路由器的DHCP( Dynami ...
- MP4