JS实现 Tab栏切换案例
要求：当鼠标点击上面相应的选项卡（tab），下面页面的内容也随之而改变。
结构分析：
全部的内容都放到一个大的盒子里面，盒子里面又可以分为上面和下面两个盒子。
上面的盒子放了 5个li，装着5个小的选项卡，默认会有一个被选中；
下面的盒子也包含了 5个 div 模块，模块内容与上面的选项一一对应，当前默认的只有第一个 div会被显示出来。
实现思路：
点击切换选项卡部分
Tab 栏切换有2个大的 模块
1、上面模块的选项卡，点击某一个，改变当前样式，底色变为红色，字体颜色变为白色。而其他的选项卡样式不发生改变（排他思想）
通过修改类名的方式实现。
2、下面模块的内容，会随着上面的选项卡变化。所以下面模块变化写到点击事件里面。
规律：下面的模块显示的内容和上面选项卡一一对应，相匹配。
核心思路：给上面模块里面所有的 li 添加自定义属性，属性值从 0 开始作为索引号。
排他思想：通过 for循环遍历数组中的元素，进入循环之后首先消除所有部分的样式，接着再为所点击的当前部分添加样式。
通过 setAttribute（name，value）创建自定义属性，name指的是为元素设置的自定义属性，value为自定义属性添加的属性值。
通过 getAttribute（name）获取元素的属性。name是属性的名称。
默认第一个选项卡对应的下面模块是显示的，需要在添加行内样式（style='display:block'）因为CSS行内样式的优先级高于外部样式，会优先显示。
而（items[index].style.display = 'block';）这一句也相当于创建了行内样式。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab栏切换</title>
<style>
*{
margin:0;
padding:0;
}
.tab{
width:800px;
height:45px;
border:1px solid #ccc;
border-bottom:1px solid #c81623;
background: #fafafa;
position:relative;
margin:100px auto;
}
.tab_list li{
width:160px;
height:45px;
list-style:none;
line-height:45px;
text-align: center;
float:left;
}
.tab_list .current{
background-color:#c81623;
color:#fff;
}
.item{
width:800px;
height: 200px;
padding-top:40px;
/*line-height:200px;*/
font-size: 30px;
color:#fff;
text-align: center;
text-shadow:2px 2px 4px #000000;
background: #efefef;
/*opacity: 0.8;*/
top:47px;
position:absolute;
}
</style>
</head>
<body>
<div class='tab'>
<div class='tab_list'>
<ul>
<li class='current'>个性推荐</li>
<li>歌单</li>
<li>主播电台</li>
<li>排行榜</li>
<li>歌手</li>
</ul>
</div>
<div class='tab_con'>
<div class="item one" style='display:block'>每日歌曲推荐</div>
<div class="item two">精品歌单倾心推荐，给最懂音乐的你</div>
<div class="item thr">上瘾烟嗓情感之声</div>
<div class="item fou">新歌飙升榜</div>
<div class="item fiv">歌手排行榜</div>
</div>
</div>
<!-- tab 栏切换有2个模块
模块的选项卡，点击其中的某一个，被点击的这一个底色将变成红色的，其余的不变（排他思想）使用修改类的名称的方式。 -->
<!-- 下面显示模块内容，会随着上面的选项卡变化，所以下面模块变化写到点击事件里面。
规律：下面模块显示内容和上面的选项卡一一对应，相匹配。
--> <script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
//for 循环绑定点击事件
for(var i=0;i < lis.length;i++){
lis[i].setAttribute('index',i);
lis[i].onclick = function() {
//
for(var i=0;i < lis.length;i++){
lis[i].className = '';
}
//留下现在需要用的
this.className = 'current';
//下面显示内容模块
var index = this.getAttribute('index');
console.log(index);
//去掉其他的 item，让这些隐藏起来
//只留下当前的 item，让它显示出来
for(var i=0;i<items.length;i++){
items[i].style.display='none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
实现效果：
点击其它选项
JS实现 Tab栏切换案例的更多相关文章
- tab栏切换案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- js 实现tab栏切换效果
效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- tab栏切换制作
tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- [javascript]switchTab:仿腾讯首页Tab栏切换js插件
腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...
- tab栏切换效果案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- OKR工作法 目标明确的写下来 - 结果记录- 校准
1.o - objective - 旅程的目的地 - 方向 - 定性的 2.kr - key result - 旅途的下一跳和关键节点 - 定量的 - 需要停下来校准 ################ ...
- python 学习笔记三 （元编程）
#动态创建类 # type(class_name, tuple_of_parent_class, dict_of_attribute_names_and_values), 第二个参数为继承关系,可以为 ...
- python list 中extend（）与append（）区别
def changextend(str): "print string with extend" mylist.extend([40,50,60]); print(mylist) ...
- # 组合数学-组合数+lacus定理
目录 数论-组合数+lacus定理 组合数计算 lacus定理-大组合数取模 数论-组合数+lacus定理 组合数计算 为避免爆long long,\(20!\)就达到了long long 的范围,采 ...
- java基础：强引用、弱引用、软引用和虚引用 （转）
出处文章: Java基础篇 - 强引用.弱引用.软引用和虚引用 谈谈Java对象的强引用,软引用,弱引用,虚引用分别是什么 整体结构 java提供了4中引用类型,在垃圾回收的时候,都有自己的各自特点. ...
- Alibaba开源组件-分布式流量控制框架sentinel初探
Alibaba开源组件-分布式流量控制框架sentinel初探 2018年12月09日 18:23:11 SuperPurse 阅读数 1965更多 分类专栏: J2EE 版权声明:本文为博主原创 ...
- Java后端技术面试汇总(第四套)
1.Java基础 • 为什么JVM调优经常会将-Xms和-Xmx参数设置成一样:• Java线程池的核心属性以及处理流程:• Java内存模型,方法区存什么:• CMS垃圾回收过程:• Full GC ...
- C++参数传递与STL
C++参数传递与STL 这是一篇备忘录形式的内容,涉及到的内容比较基础 今天写了一个小算法,用一个set在函数间传递,记录各个函数中的结果.但是最后结果显示set中的元素是0个.查了一下才发现,用来C ...
- 多Y轴示例
//多Y轴示例 <template> <div id="main" :style="{width:'1000px',height:'500px' }&q ...
- vscode常用插件列表
vscode插件 备注 Markdown PDF 把markdown文件转换成别的文件 Markdown TOC markdown文件目录生成 PHP Debug PHP调试 PHP Intenlli ...