这篇博客介绍了如何使用原生JavaScript来实现选项卡功能。每个选项卡对应的div内容初始时隐藏，通过点击a标签触发事件，根据a标签的href属性值（去掉#号）找到对应的div并显示，同时移除其他div的激活状态。只需确保a标签的属性值与div的id匹配，并在属性值前加上#，即可轻松添加更多选项卡模块。
实现原理:
每个a标签的对应一个div块,除了第一个div块,其他都隐藏起来,后面通过给a标签添加点击事件,如有需要也可改为移入事[onmouseover],然后获取a标签的href属性值,即该属性值去掉#号就是对应div块的id,通过给该div块添加active类和移除其他块的active类即可实现.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡-JS篇</title>
<style type="text/css">
*{
box-sizing: border-box;
}
html,body,div,ul,li{
margin: 0;
border: 0;
padding: 0;
}
ul {
clear: both;
overflow: hidden;
}
ul li {
float: left;
list-style: none;
}
.option-blocks .option-block {
overflow: hidden;
display: none;
}
.li-active {
color: #fff;
background: #ddd;
}
.active {
display: block !important;
/*提升级别,防止被以上的display: none覆盖*/
}
.option-tabs {
margin-bottom: 20px;
}
.option-tabs ul {
border-bottom: 1px solid #ddd;
}
.option-tabs ul li{
padding: 10px 20px;
}
.option-tabs ul li a {
text-decoration: none;
}
a:focus{
background:red;
}
.option-blocks{
padding: 0 20px;
}
</style>
</head>
<body>
<div clss="tabs-container">
<div class="option-tabs">
<ul>
<li class="li-active"><a href="#block-a">张三</a></li>
<li><a href="#block-b">李四</a></li>
<li><a href="#block-c">王五</a></li>
<li><a href="#block-d">赵六</a></li>
</ul>
</div>
<div class="option-blocks">
<div id="block-a" class="option-block active">
张三，全中国最耳熟能详的名字。这个名字太普通，所以他只能是小人物。从北京上海到每一个普通城市，都有张三这样的人存在着，可能是你，可能是你身边的朋友。无数个张三汇聚到一起，就成了“张三族”。如果你是背着生活压力的男人，你就已经成为了“张三族”的候选人。你可能是个生活平稳的中年男人，工作还算稳定，家庭还算和睦，孩子还算听话，每月数额不菲的房贷对生活还构不成太大压力，父母的身体也还算健康。中国人讲究知足常乐，知足常乐没错，可以让人常常保持放松的心态，但它同样也有害处，最大的害处就是容易让人懈怠，容易让人不思进取。平稳总是相对的，你没有意识到领导对你工作的不满是因为你的懈怠，反过来你却说认为领导实在变态；你没有注意到父母的身体一天天变差；你没有注意到温和的妻子已与你渐渐远行……小心了，如果任何一个危机爆发，你都会迅速沦为“张三族”徐峥解读“张三族”
反映都市小人物奋斗故事的《老爸快跑》在央视掀起热浪。一个三十多岁的都市小男人，原本过着懒散、邋遢的小市民生活，一连串突如其来的打击令他方寸大乱，老婆离婚、小店被骗、老父亲生病、争夺孩子抚养权……他的名字叫“张三”，这部戏的热播还引发了一个新名词——张三族，意指生活现状令人堪忧的中年男性。关于张三族的话题油然而生，而扮演张三的徐峥对这个不起眼的群体有着特殊的理解。在接受当年的“张三生活”。
</div>
<div id="block-b" class="option-block">
李四听他们的脚步声来判断他们距离楼梯口的距离，当他们走到离三楼的楼梯口15米左右时，他端起枪探出了头，他知道，猎枪这个东西毕竟不是军队里的步枪，超过20米，枪法再好也很难打得准，五连发的有效的精准射程就在20米之内。毕竟李四只是想伤人，不到万不得已不会去主动杀人，他可不想枪失去了准头失手把人打死。约5秒后，李四隔门朝里面就是一枪，他这次又是朝着人腿打的，他可不想杀人。李四的枪法和耳朵都很准，这一枪又打中了一个人，后来知道，他这枪是擦着老五的小腿过去的。这一枪打完，里面也传来了一声枪声，这是老五隔着门朝门外开了一枪。 这样胡乱打的一枪怎么可能打到一直倚*在墙边的李四？李四朝里面又是一枪，这次是李四胡乱打的，他知道他再打一枪里面的人的精神防线非崩溃不可。
</div>
<div id="block-c" class="option-block">
王五出生贫寒，三岁时父亲又因疾去世。他只得与母亲相依为命，很小便开始干各类杂活，后来又拜肖和成为师，为习武打下了坚实的基础。沧州当时最有名的武师当属双刀李凤岗。为了修习更高的武艺，王五便想拜他为师，却多次吃了闭门羹，他就长跪李门前以示诚心，李凤岗为其精神打动，便收其为徒。王五不负师父重望，几年下来功夫已不在师父之下。为了把他锻炼成更加全面的人才，李把他推荐给自己的师兄刘仕龙，一起押镖，行走江湖。经过几年的锻炼，王五告别了师父，同治十年，他先到天津，后又到北京，经人介绍到了一家镖局当了镖师。
</div>
<div id="block-d" class="option-block">
遥远的大漠中，风云变幻，充满着紧张的气氛。“麻子面馆”老板王五麻子（倪大红 饰）是一个恶贯满盈、吝啬的“大漠周扒皮”。如此老板，其妻子老板娘（闫妮 饰）经常遭到王五麻子的虐待。期待自由的老板娘与外表俊朗的店小二发生私情，不想却被杀手张三（孙红雷 饰）发现。张三将其汇报给了王五麻子，王五麻子便以重金雇佣张三杀死老板娘和李四。不想张三并没有杀死李四两人，反而先杀死了王五麻子。随后张三便开始琢磨起王五麻子的保险箱来。无巧不成书，店伙计赵六正巧“破解”了保险箱的密码，正当准备前去取钱时，却遭到张三的暗杀。张三杀死了赵六并逼走了陈七（毛毛 饰），随后开始一路追杀老板娘和李四两人。老板娘和李四为了自由四处流亡，当回到面馆时却不幸遭到张三的埋伏，李四当场被箭射死。悲痛欲绝的老板娘拿起了仅存最后一颗子弹的火枪，终于将张三杀死。
</div>
</div>
</div>
<script>
var optionTabs = document.getElementsByClassName('option-tabs')[0];
var optionTabsAs = optionTabs.getElementsByTagName('a');
var optionBlocks = document.getElementsByClassName('option-block');
for(var i=0;optionTabsAs.length;i++)
{
optionTabsAs[i].onclick = function(){
//移除当前a标签块某些样式';
var liArr = optionTabs.getElementsByTagName('li');
for(k=0;k<liArr.length;k++)
{
liArr[k].classList.remove('li-active');
}
//设置当前a标签块的样式
this.parentNode.classList.add('li-active');
for(j=0;j<optionBlocks.length;j++)
{
//删除active所有选项卡内容块的active类
optionBlocks[j].classList.remove('active');
}
//获取相应的block的id
var hrefValue = this.getAttribute('href');
var BlockId = hrefValue.substr(1,hrefValue.length);
//给当前的选项卡内容块增加active属性
document.getElementById(BlockId).classList.add('active');
}
}
</script>
</body>
</html>
效果展示:
注意:
只需要a标签的属性值需要对应相应div块的id值,然后不要忘记在a标签属性值前面加个#号,不需要动其他的代码,可无限量添加模块* v *.
扫一扫
2489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
