JavaScript TAB栏切换效果的示例
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<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++) {
// 开始给5个li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 清除其他选项卡的样式
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 单独设置自己的样式
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
// 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
运行效果：
以上就是JavaScript TAB栏切换效果的示例的详细内容，更多关于JavaScript TAB栏切换效果的资料请关注我们其它相关文章！
相关推荐
-
js tab栏切换代码实例解析
今天机试有个内容是做网易云课堂tab栏切换的,如下 先简单说下我当时的想法 1.先弄一个大div盒子,我命名为tab 2.在大盒子tab里面有两个小盒子,分别是标题栏(tab_list)和内容栏(tab_con) 3.采用display:flex:使标题栏菜单和内容栏的内容水平对齐(可能待会放的代码不是很规范,但实现对齐效果) 4.js编写鼠标移入事件,主要是利用display:none和display:block之间的切换. 下面放下我当时写的代码吧,可能写得不是很正规,不符合习惯,请大家见谅
-
基于JS实现table导出Excel并保留样式
浏览器环境:谷歌浏览器 1.在导出Excel的时候,保存table的样式,有2种方法,①是在table的行内写style样式,②是在模板里面添加样式 2.第一种方式:行内添加样式 <td>公司一</td> 效果: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</
-
原生js+css实现tab切换功能
本文实例为大家分享了原生css+js实现tab切换功能的具体代码,供大家参考,具体内容如下 现在很多的ui框架都集成了tab功能,使用过程中只需按照他们的api套用即可,但在有时jquery项目中会觉得为了一个tab功能再单独调用一个ui库有些小题大做,所以博主这里推荐了原生tab的实现 分析:通过display属性控制每一个tab的显示 以下是图片示例: 以下是代码部分: <!DOCTYPE html> <html lang="en"> <head>
-
js实现文章目录索引导航(table of content)
什么叫TOC呢?table of content. 具体什么效果呢?可以随便找个hexo博客中体验一下,例如这个. 好了,实现它有2个要点: 点目录跳到段落:通过<a>标签的锚点实现,其原理在这里. 滚动触发目录变换:通过js监听滚动事件,判定当前所处段落,令对应目录项高亮. 我写了一个简单的demo来演示这个效果, 源码地址:https://github.com/owenliang/js-toc 在线体验:http://owenliang.github.io/js-toc 实现分析 #toc
-
原生JavaScript写出Tabs标签页的实例代码
最近在重新学习JavaScript,手写了一个tabs标签页. 话不多说,直接开始. 首先,是前端页面. 图1 tabs 先来把tabs分解一下: 图2 tabs分解 首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序列表ul,里面三个li标签(黄色的框),li标签里两个绿色标签是两个span,一个用来放导航的名字,一个用来放导航关闭的icon,右边是一个button,用来添加新的导航栏及内容:下方是导航栏的内容section. 导航tabs.html代码如下: <!DOCT
-
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"> &l
-
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
1.表格动态添加,也可删除 <template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="wid
-
js实现tab栏切换效果
本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现tab栏切换</title> <style> * { margin: 0; margin: 0; padding: 0; list-style: none; } .nav
-
JavaScript TAB栏切换效果的示例
代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&quo
-
angularjs实现Tab栏切换效果
本文实例为大家分享了angularjs实现Tab栏切换效果的具体代码,供大家参考,具体内容如下 如图所示 选中后提交的实例代码: <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <script type="text/javascript&
-
jQuery实现tab栏切换效果
本文实例为大家分享了jQuery实现tab栏切换效果的具体代码,供大家参考,具体内容如下 具体实现功能 1.切换选项卡 2.添加选项卡 3.删除选项卡 4.编辑选项卡 html结构 <div class="tabsbox" id="tab"> <!-- tab标签 --> <nav class="firstnav"> <!-- tab栏标题 --> <ul> <li class=&
-
vue实现tab栏切换效果
本文实例为大家分享了vue实现tab栏切换效果的具体代码,供大家参考,具体内容如下 一个简单的tab栏切换组件,由tabs以及tab-pane组成 效果图 使用 <template> <div class="container"> <tabs default-active="2" class="build-tabs" > <tab-pane
-
JS实现的tab页切换效果完整示例
本文实例讲述了JS实现的tab页切换效果.分享给大家供大家参考,具体如下: 效果图如下: 完整实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
-
React实现类似淘宝tab居中切换效果的示例代码
效果 DOM布局 const label = { lettersort: false, paramname: "label", paramid: 0, title: "车源列表筛选项", option: [{ value: 1, text: "全部" }, { value: 2, text: "本地求购" }, { value: 3, text: "精准收车" }, { value: 4, text: &q
-
angular4实现tab栏切换的方法示例
管理系统 tab 切换页,是一种常见的需求,大概如下: 点击左边菜单,右边显示相应的选项卡,然后不同的选项卡面可以同时编辑,切换时信息不掉失! 用php或.net,java的开发技术,大概是切换显示,然后加一个ifram来做到,或者通过ajax加载信息显示相应的层. 但是如果用angular 要如何实现呢?第一个想法,是否可以用同样的ifarm来实现呢? 第二个想到的是路由插座大概是这样的 复制代码 代码如下: <router-outlet name="main-content"
-
JavaScript实现简易tab栏切换案例
本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码,供大家参考,具体内容如下 1. tab栏-案例1 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想: 1).所有元素全部清除样式(干掉其他人) 2).给当前元素设置样式 (留下我自己) 3).注意顺序不能颠倒,首先干掉其他人,再设置自己 我的思路: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta char