这里使用了两种方式：请看下面的js代码
第一种是随机换一批
第二种是排序换一批 按顺序换下一批
需要依赖juuery
<html>
<head>
<meta charset="utf-8">
<title>jQuery点击换一批标签代码</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul li{
list-style: none;
}
a,a:active,a:hover {
color: black;
text-decoration: none;
}
.changeone{
width: 100%;
height: 140px;
border-bottom:8px solid #eeeeee;
font-size: 14px;
}
.changeone ul{
width: 100%;
display: flex;
flex-wrap: wrap;
height: 80px;
}
.changeone ul li{
flex: 1;
width: 25%;
min-width: 25%;
padding: 5px;
text-align: center;
margin-top: 10px;
}
.changeone ul li span{
padding: 4px 5px;
border: 1px solid #fe7702;
border-radius: 6px;
}
.huan{
text-align:center;
font-family:"微软雅黑";
color:gray;
font-size: 16px;
font-weight: bold;
}
.huanbox{
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<!-- 换一批 -->
<div class="changeone">
<ul>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>新婚旅行</span></a></li>
<li><a href="#"><span>新婚旅行</span></a></li>
<li><a href="#"><span>新婚旅行</span></a></li>
<li><a href="#"><span>新婚旅行</span></a></li>
</ul>
<div class="huanbox"><a href="javascript:void(0)"><span class="huan">换一批</span></a> </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
</body>
</html>
//第一种：随机换一批 随机会有重复出现
<script>
//sjShow回调函数
function sjShow(){
$("li").hide();//隐藏li显示的元素
var i=0;
while(i<8)//循环显示8个
{
//floor向下取整。random随机乘以li的总长度
var id=Math.floor(Math.random()*$("li").length);
//获取到当前随机到的li
var curDiv=$("li").eq(id);
//判断是否是影藏的
if(curDiv.css("display")=="none")
{
//隐藏的让他显示
curDiv.css("display","block");
i++;
}
}
}
$(function() {
//调用sjshow方法
sjShow();
//点击的时候再次调用sjShow
$(".huan").click(function(){
sjShow();
});
})
</script>
//第二种： 按顺序换下一批。当没有了切换回第一批
<script>
var changeindex = 1;
var clickindex = 2;
$(".changeone li").each(function (index, element) {
if (index / 8 < changeindex) {
element.className = "change" + changeindex;
} else {
changeindex++;
element.className = "change" + changeindex;
}
});
//隐藏所有兄弟
$(".change1").siblings().css("display", "none");
$(".change1").show();
$('.huan').click(function () {
if (clickindex <= changeindex) {
$(".change" + clickindex).siblings().css("display", "none");
$(".change" + clickindex).show();
clickindex++;
} else { //clickindex > changeindex 要重置回第一批
clickindex = 1;
$(".change" + clickindex).siblings().css("display", "none");
$(".change" + clickindex).show();
}
});
</script>
网友评论