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个小的选 ...
随机推荐
- Windows Azure系列公开课 - 第一课：认识云计算
我们正在经历着一个前所未有的变革时代.信息技术的不断创新也推动着各行业的业务创新. 任何规模和类型的组织都需要拥抱最新的IT趋势才能保持竞争力与创新力,并关注自身的业务. 云计算的最终目标是将计算.服 ...
- 【Leetcode】【Easy】Contains Duplicate
Given an array of integers, find if the array contains any duplicates. Your function should return t ...
- 使用MDScratchImageView实现刮奖效果
使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // ...
- HTML简单框架网页制作 吴昊
- windows10 彻底卸载 Docker 和 DockerNAT
删除docker程序 记事本新建脚本文件 a.ps1,内容如下: $ErrorActionPreference = "SilentlyContinue" kill -force - ...
- CentOS 7 安装Rabbitmq
第一步也是往往最重要的一步:下载安装包! Rabbitmq地址:https://github.com/rabbitmq/rabbitmq-server/releases/tag/v3.7.5 Erla ...
- Android 6.0动态权限申请教程
转载请标明出处: http://www.cnblogs.com/why168888/p/6580396.html 本文出自:[Edwin博客园] PermissionManage 介绍 如果设备运行的 ...
- webpack和gulp
在没有使用任何自动化工具之前,如果用sass写了css, 用coffee写了js, 那么我们必须手动用相应的compiler去编译各自的文件,然后各自minify(js,css文件压缩并合并).这时如 ...
- CF219D Choosing Capital for Treeland
嘟嘟嘟 树形dp. 首先一个很常规的想法就是如果u到v有一条边,那么建立cost(u, v) = 0, cost(v, u) = 1的两条边. 可以两遍dfs. 先任选一个点作为根节点,第一遍从下往上 ...
- [TEST123] Performance Test
https://blog.csdn.net/zhouping19851013/article/details/82870789 https://www.cnblogs.com/jackei/archi ...