JavaScript实现tab栏切换效果
本文实例为大家分享了JavaScript实现tab栏切换效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- css样式 -->
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
margin: 100px 500px;
border: 1px solid #999;
}
li {
list-style: none;
}
.tab_top {
width: 600px;
height: 50px;
background-color: #ccc;
}
.tab_top li {
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
padding: 0 20px;
}
.current {
background-color: red;
color: #fff;
}
.tab_con {
width: 600px;
height: 300px;
background-color: #fff;
}
先在css里面设置下面小div全部隐藏
.item {
display: none
}
</style>
<!-- html结构 -->
<body>
<div class="box">
<div class="tab_top">
<ul>
<li class="current">标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
<li>标题五</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;"> --->此处默认第一个显示
我是内容一<br>
我是内容一<br>
我是内容一<br>
我是内容一<br>
我是内容一<br>
</div>
<div class="item">
我是内容二<br>
我是内容二<br>
我是内容二<br>
我是内容二<br>
我是内容二<br>
</div>
<div class="item">
我是内容三<br>
我是内容三<br>
我是内容三<br>
我是内容三<br>
我是内容三<br>
</div>
<div class="item">
我是内容四<br>
我是内容四<br>
我是内容四<br>
我是内容四<br>
我是内容四<br>
</div>
<div class="item">
我是内容五<br>
我是内容五<br>
我是内容五<br>
我是内容五<br>
我是内容五<br>
我是内容五<br>
</div>
</div>
</div>
</body>
js:
<script>
//1 上的选项卡 点击某一个 当前这一个底色是红色 其余不变 （排他思想） 修改类名的方法
//获取元素
//01 获取上半部分盒子
var tab_top = document.querySelector('.tab_top');
//02 获取上班部分 所有小li 得到一个数组
var lis = tab_top.querySelectorAll('li');
//03 获取下半部分 所有小div盒子 得到一个数组
var item = document.querySelectorAll('.item')
//for 循环所有小li 绑定点击事件
for (var i = 0; i < lis.length; i++) {
//开始给上面li设置索引号 属性index 值 i
lis[i].setAttribute('index', i);
// 注册点击事件
lis[i].onclick = function () {
// 来个排他思想
for (var j = 0; j < lis.length; j++) {
//先让所有的li 点击没有样式
lis[j].className = '';
}
// 谁点击 谁加样式
this.className = 'current'
//2 下面显示内容模块也要写在onclick里面 因为一一对应
// 给上面top 所有li 添加index 索引号 属性从0开始 自定义属性
// 上面已经设置好 现在拿来用
var index = this.getAttribute('index');
// 点击上面li 对应下面div显示出来
//再来排他思想 先干掉其他人 让隐藏 点谁 谁显示
for (var k = 0; k < item.length; k++) {
//所有的小div 隐藏
item[k].style.display = 'none'
}
//点击哪个小li 小li的index对应的div 显示
item[index].style.display = 'block';
}
}
</script>
效果图：
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于jquery的tab切换 js原理
html代码: 复制代码 代码如下: <div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3
-
一个精简的JS DIV层tab切换代码
DIV层切换 function ChangeDiv(divId,divName,zDivCount) { for(i=0;i 内容一 内容二 内容三 内容部分第一区 内容部分第二区 内容部分第三区 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
Vue.js组件tabs实现选项卡切换效果
今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di
-
JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果是个比较流行的网页菜单效果,在网上经常可看到这种菜单的身影.本菜单在火狐.IE8.Chrome下测试通过,代码兼容性还可以,自己用的化再美化一下风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-
-
一个js的tab切换效果代码[代码分离]
支持自动播放 可定义鼠标事件延迟 不限制html结构 假设HTML如下: 复制代码 代码如下: <ul> <li id="t1">tab1</li> <li id="t2">tab2</li> <li id="t3">tab3</li> </ul> <div id="c1">content1</div> &l
-
用AngularJS的指令实现tabs切换效果
先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: <A-deirective> <B-directive></B-directive> <C-directive></C-directive> </A-directive> 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁. <!DOCTYPE html> <html lang="en"
-
javascript实现tabs选项卡切换效果(自写原生js)
现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</
-
js(JavaScript)实现TAB标签切换效果的简单实例
一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成! 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401- 19991224/loose.dtd"><HTML xmlns="http://www.w
-
js实现点击切换TAB标签实例
本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-click-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
-
javascript实现tab切换的四种方法
tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style: