如何控制标签切换显示?
程序员文章站
2024-02-08 21:44:10
...
第一种方法:原生JS实现!
- 部分html代码
<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"> <!-- 这里的类名,可以随便取,不一定要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>
.......
- CSS代码
seckill-nav li,
.seckill-goods ul {
display: none; /*先设置为空,隐藏*/
}
seckill-nav .active,
.seckill-goods .active{
display: block; /*当我有类名active的时候,就让它显示出来*/
}
- js代码
window.onload=function(){
var tabs = document.getElementById("tabs").getElementsByTagName("li"); //这是获取时间栏的li
//console.log(tabs);
var lists = document.getElementById("lists").getElementsByTagName("ul"); //这是获取内容的ul
for(var i = 0; i < tabs.length; i++){
tabs[i].onclick = showlist; //当点击的时候引用下面我们自定义的函数。
lists[i].onclick = showlist;
} // 把时间栏的点击事件 和 内容的点击事件放在一起,这样就会形成联系在一起!(第1一个时间对应第一个内容)
function showlist(){
for(var i = 0; i < tabs.length; i++){
if(tabs[i] == this){
tabs[i].className = "active"; //当我们点击第 i个标签时, i的标签添加class="active"
lists[i].className = "active"; //同理
}
else {
tabs[i].className = "";
lists[i].className = ""; //没有点击的其它标签的class为空
}
}
}
}
整体的思路是:
一、先获取时间栏里面的li标签
二、for循环遍历所有的li | ul 的数量
三、写发生点击事件时的函数
四、函数的思路很简单:“
当我点击哪一个li或者哪一个ul的时候,我给它添加个active类。
有class="active"的标签,可以显示出来
没有点击的其它标签全部设置为空就行了。
”
第二种方法:jq实现
- html代码
代码和上面的一样
不过在html开始的时候要引入jq
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
- CSS代码一样
- jq代码
$(function() {
//mousemove
$("#tabs>li").click(function(){
//给移入的li加入active
$(this).addClass("active");
//清空其它li标签里面存在的active
$(this).siblings().removeClass("active");
//获取当前的索引(当前的点击)
var tabsli = $(this).index();
console.log(tabsli);
//显示ul的内容
var lists = $("#lists>ul").eq(tabsli);
console.log(lists);
lists.addClass("clearfix active");
lists.siblings().removeClass("clearfix active");
})
})
推荐阅读
-
如何控制标签切换显示?
-
如何让2个不同的a标签点击时显示不同颜色_html/css_WEB-ITnose
-
ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx'问题
-
div中有一个marquee标签,marquee中有滚动显示的文字,如何让文字在div中垂直居中从右向左滚动显示?_html/css_WEB-ITnose
-
如何用js控制frame的隐藏或显示的解决办法_javascript技巧
-
不用CSS,如何控制如上显示
-
如何用CSS控制全局A连接在新标签打开_html/css_WEB-ITnose
-
不用CSS,如何控制如下显示
-
div中有一个marquee标签,marquee中有滚动显示的文字,如何让文字在div中垂直居中从右向左滚动显示?_html/css_WEB-ITnose
-
php向前端发送的字符串中存在HTML标签如何正常显示