jq简易实现tab栏切换
1,html
<div class="box" id="tabList">
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
2,js
$("#tabList div").click(function () {
$(this).addClass('active').siblings().removeClass('active');
})
3,css
.active {
background: #4e89e9;
color: #fff !important;
border: none !important;
}
jq实现tab切换轮播
1.html
<div class="container">
<div class="nav">
<span class="active">盒子1</span>
<span>盒子2</span>
<span>盒子3</span>
<span>盒子4</span>
<span>盒子5</span>
<div class="clear"></div>
</div>
<div class="content">
<div class="box">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<!--数量自己定义,只要总宽度跟content的宽度一样就好-->
</ul>
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<!--数量自己定义,只要总宽度跟content的宽度一样就好-->
</ul>
<ul>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
<!--数量自己定义,只要总宽度跟content的宽度一样就好-->
</ul>
<ul>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<!--数量自己定义,只要总宽度跟content的宽度一样就好-->
</ul>
<ul>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
<!--数量自己定义,只要总宽度跟content的宽度一样就好-->
</ul>
<!--ul可以只有一个,也就是把li放同一个里面,这里放了很多个是为了分类,比如不同的ul里面放不同的内容-->
</div>
</div>
</div>
2.js
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
var width = 1101; //跟外面盒子的宽度一样,或者写成 var width = $(".content").width();
var ulNum = $(".content ul").length; //获取ul的个数
var contentWidth = width * ulNum; //获取整个box应该的长度,刚开始box设置成了1100,但是应该把所有的ul防到一行里面去,这样box向左移动的时候才是无缝滚动
$(".box").width(contentWidth); //给box设置宽度 .width() 是获取宽度 .width(value)是设置宽度
$(".nav span").click(function () {
//$(this)表示点击的这个元素 ,.addClass()表示添加的样式名称,.siblings()表示这个元素的所有兄弟级元素,此处表示span,
// .removeClass()表示删除的样式名称
$(this).addClass('active').siblings().removeClass('active');
var clickNum = $(this).index(); //判断点击的是第几个span .index()方法返回第几个,从0开始算起
var moveLeft = clickNum * width * -1; //应该向左移动的距离
$(".box").animate({ 'left': moveLeft }, 600); //通过操作box的left来使box向左移动, .animate 是动画函数
//第一个参数用{}包含起来,里面的内容形式为 {'left':100,'top':100},多个用逗号隔开,
// 表示从当前位置移动到left为100px、top为100px的位置(即left:100px;top:100px处),
//第二个参数为时间,表示从当前位置移动到第一个参数用时,单位为ms,1000ms=1秒
//点击的时候一定要点开审查元素,查看box元素的行内样式
})
})
</script>
3.css
* {
padding: 0;
margin: 0
}
.clear {
clear: both;
}
.container {
width: 1100px;
margin: 50px auto 0;
}
.container .nav {
width: 1101px;
border: 1px solid #ccc;
}
.container .nav span {
display: block;
width: 219px;
border-left: 1px solid #ccc;
text-align: center;
line-height: 40px;
color: #666;
float: left;
cursor: pointer;
}
.container .nav span.active {
background: #666666;
color: #fff;
}
.container .nav span:first-child {
border: 0px
}
.content {
margin-top: 20px;
width: 1101px;
position: relative;
overflow: hidden;
height: 200px;
}
/*定位一般设置为relative,overflow设置为hidden来隐藏外面的内容*/
.content .box {
position: absolute;
width: 1101px;
height: 200px;
}
/*这个定位设置为absolute, 因为要操作这个的位置来切换内容*/
.content ul {
float: left;
width: 1101px;
}
.content ul li {
display: block;
height: 198px;
width: 219px;
float: left;
border: 1px solid #aaa;
text-align: center;
line-height: 218px;
}
.content ul li+li {
margin-left: -1px;
}
希望此文章能帮助到你