JavaScript实现Tab选项卡切换
本文实例为大家分享了js实现选项卡切换的具体代码，供大家参考，具体内容如下
会用到原生js的dom操作
html
<body>
<div id="tab">
<div id="tab_header">
<ul>
<li class="seclect">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="tab_body">
<div class="dom" style="display: block;">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="dom">
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
</div>
<div class="dom">
<ul>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
</div>
<div class="dom">
<ul>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
</ul>
</div>
<div class="dom">
<ul>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
</ul>
</div>
</div>
</div>
css就不放了
js
window.onload = function(){
var allLis = $('tab_header').getElementsByTagName('li');
var allDoms = $('tab_body').getElementsByClassName('dom');
console.log(allLis,allDoms);
// 遍历拿到的allLis
for(var i =0; i<allLis.length;i++){
var li = allLis[i];
li.index = i;
li.onmouseover = function(){
// 排他思想 将所有的class清空
for(var j = 0;j<allLis.length;j++){
allLis[j].className = '';
allDoms[j].style.display='none';
}
this.className = 'seclect';
allDoms[this.index].style.display='block';
}
}
}
function $(id){
return typeof id === "string" ? document.getElementById(id) : null;
}
这里面的 function $(id) 是我封装的一个dom id选择器，在里面先拿到准备操作的事件源，遍历拿到的数组，onmouseover鼠标移入时，再次遍历一数组，将数组里所有的classname 变为空,以及display样式隐藏，在移入时，移入哪个，给哪个赋值即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript实现tabs选项卡切换效果(自写原生js)
现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</
-
使用vue.js写一个tab选项卡效果
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti
-
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
本文实例讲述了JS实现滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-move-tab-nav-menu-demo-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
4种JavaScript实现简单tab选项卡切换的方法
本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法,分享给大家供大家参考,具体内容如下 效果图: 方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/cs
-
js简单实现竖向tab选项卡的方法
本文实例讲述了js简单实现竖向tab选项卡的方法.分享给大家供大家参考.具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title>
-
原生js实现tab选项卡切换
本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分 <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre
-
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:
-
js实现tab选项卡函数代码
* { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b
-
Vue.js组件tabs实现选项卡切换效果
今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di
-
js tab 选项卡
一般需要事先写好css样式等function tab(sId) { var tabs = document.getElementsByTagName("H2"); var boxs = document.getElementsByTagName("h3"); if ( boxs[sId].style.display=="block"){ boxs[sId].style.display="none"; tabs[sId].sty