如何用原生JS实现tab选项卡的切换效果(附代码)
程序员文章站
2022-03-24 11:10:55
...
说到tab选项卡,大家应该都不陌生吧,那你知道如何用原生JS实现tab选项卡的切换效果吗?这篇文章就给大家分享tab选项卡的制作方法以及js实现tab切换效果的代码,有一定的参考价值,感兴趣的朋友可以参考一下。
用原生JS实现tab选项卡切换效果需要用到很多JavaScript知识,比如:function,document.getElementById(),鼠标事件等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程。
实例描述:实现Tab的切换效果,我们很容易想到的是给每一个要控制的标签添加id,然后用鼠标事件,使用id获取每个元素,从而控制每个元素的样式。
HTML部分:
<div class="tab-head"> <h2 id="tab1" onmouseover="changeTab1()" class="selected">按钮1</h2> <h2 id="tab2" onmouseover="changeTab2()">按钮2</h2> <h2 id="tab3" onmouseover="changeTab3()">按钮3</h2> </div> <div class="tab-content"> <div id="c1" class="show">content1</div> <div id="c2">content2</div> <div id="c3">content3</div> </div>
CSS部分:
*{padding: 0;margin: 0;} h2 { width: 150px; height: 30px; margin: 0 auto; float: left; text-align: center; } .tab-content div{ width: 148px; height: 150px; border: 1px solid black; display: none; position: relative; background: pink; } #c1{ position: absolute; top: 30px; left: 0; } #c2{ position: absolute; top: 30px; left: 150px; } #c3{ position: absolute; top: 30px; left: 300px; } .selected { background-color: cornflowerblue; } .tab-content .show{ display: block; }
JavaScript部分:
var tab1 = document.getElementById('tab1'), tab2 = document.getElementById('tab2'), tab3 = document.getElementById('tab3'), c1 = document.getElementById('c1'), c2 = document.getElementById('c2'), c3 = document.getElementById('c3'); function changeTab1() { tab1.className = 'selected'; tab2.className = ''; tab3.className = ''; c1.className = 'show' c2.className = ''; c3.className = ''; } function changeTab2() { tab1.className = ''; tab2.className = 'selected'; tab3.className = ''; c1.className = ''; c2.className = 'show'; c3.className = ''; } function changeTab3() { tab1.className = ''; tab2.className = ''; tab3.className = 'selected'; c1.className = '' c2.className = ''; c3.className = 'show'; }
效果如图所示:
这种方法,有几个元素就有几个id,且每个tab都要编写function,如果要增加tab,还要增加id和function,代码冗余,不易扩展,所以此方法适合tab不多的情况下。
以上给大家分享了如何用原生JS实现tab选项卡的切换效果,步骤很详细,初学者可以自己动手尝试,看看能不能实现tab切换的效果,希望这篇文章对你有所帮助!
【相关教程推荐】
1. JavaScript中文参考手册
2. CSS3视频教程
3. bootstrap教程
以上就是如何用原生JS实现tab选项卡的切换效果(附代码)的详细内容,更多请关注其它相关文章!
上一篇: php面向对象之构造函数和析构函数
下一篇: nodejs中的koa是什么
推荐阅读
-
JS+CSS实现的经典tab选项卡效果代码_javascript技巧
-
js鼠标经过tab选项卡时实现切换延迟的示例代码分享
-
js实现的tab标签切换效果代码分享_javascript技巧
-
JS+CSS实现的经典tab选项卡效果代码_javascript技巧
-
css+js实现垂直旋转切换的幻灯片动画效果(附代码)
-
JS实现黑色风格的网页TAB选项卡效果代码_javascript技巧
-
CSS实现简单的选项卡切换效果(附代码)
-
js鼠标经过tab选项卡时实现切换延迟的示例代码分享
-
js实现的tab标签切换效果代码分享_javascript技巧
-
jQuery实现滚动切换的tab选项卡效果代码_jquery