第一种方法:原生JS实现!
<div class="seckill">
<div class="seckill-head"></div>
<div class="seckill-container">
<div class="seckill-nav">
<ul id="tabs">
<li class="active"><em>14:00</em><span><em>抢购中<br>距结束 00:36:28</em></span></li>
<li><em>20:00</em><span>即将开始</span></li>
<li><em>20:00</em><span>即将开始</span></li>
<li><em>22:00</em><span>明日开始</span></li>
<li><em>00:00</em><span>明日开始</span></li>
</ul>
</div>
<div id="lists" class="seckill-goods">
<ul class="active">
<li>
<div class="bg"><img src="/img/小米秒杀2.jpg" alt=""></div>
<div class="info">
<span class="title">第一个图片Pro.6" I5 8G 1T PCI</span><br>
<span class="desc">更强悍的专业笔记本</span><br>
<span class="price">6499.00元 <del>6799元</del></span><br>
<span class="btn">登录后抢购</span>
</div>
</li>
.......
seckill-nav li,
.seckill-goods ul {
display: none;
}
seckill-nav .active,
.seckill-goods .active{
display: block;
}
window.onload=function(){
var tabs = document.getElementById("tabs").getElementsByTagName("li");
var lists = document.getElementById("lists").getElementsByTagName("ul");
for(var i = 0; i < tabs.length; i++){
tabs[i].onclick = showlist;
lists[i].onclick = showlist;
}
function showlist(){
for(var i = 0; i < tabs.length; i++){
if(tabs[i] == this){
tabs[i].className = "active";
lists[i].className = "active";
}
else {
tabs[i].className = "";
lists[i].className = "";
}
}
}
}
整体的思路是:
一、先获取时间栏里面的li标签
二、for循环遍历所有的li | ul 的数量
三、写发生点击事件时的函数
四、函数的思路很简单:“
当我点击哪一个li或者哪一个ul的时候,我给它添加个active类。
有class="active"的标签,可以显示出来
没有点击的其它标签全部设置为空就行了。
”
第二种方法:jq实现
代码和上面的一样
不过在html开始的时候要引入jq
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
$(function() {
$("#tabs>li").click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
var tabsli = $(this).index();
console.log(tabsli);
var lists = $("#lists>ul").eq(tabsli);
console.log(lists);
lists.addClass("clearfix active");
lists.siblings().removeClass("clearfix active");
})
})