简单实用的选项卡切换js效果

JS实现多重选项卡切换轮播图

JS实现多重选项卡切换轮播图轮播动画来提升页⾯的颜值和交互性能，下⾯我们将⼀起学习利⽤html , css和Javascript等前端开发基础知识来制作⼀个简单的轮播图。

轮播图简介：在⼀个⽹站的某⼀特定模块，通过电脑上⿏标点击或⿏标移⼊、⼿机上⼿指滑动后，可以分别展⽰不同的图⽚，这个模块就叫做轮播模块。

(做的不好的地⽅欢迎各位⼤佬批评指正,感觉有帮助的同学⿇烦给颗星星哦~)html布局部分:<div id="box"><div class="scenery pic"><img class="show" src="imgs/s2.jpg" alt="scenery"><img src="imgs/s3.jpg" alt="scenery"><img src="imgs/s1.jpg" alt="scenery"><img src="imgs/s5.jpg" alt="scenery"><img src="imgs/s4.jpg" alt="scenery"></div><div class="car pic"><img src="imgs/animal4.jpg" alt="animal"><img src="imgs/animal3.jpg" alt="animal"><img src="imgs/animal2.jpg" alt="animal"><img src="imgs/animal1.jpg" alt="animal"></div><div class="entertainment pic"><img src="imgs/entertainment1.jpg" alt="entertainment"><img src="imgs/entertainment2.jpg" alt="entertainment"><img src="imgs/entertainment3.jpg" alt="entertainment"><img src="imgs/entertainment4.jpg" alt="entertainment"><img src="imgs/entertainment5.jpg" alt="entertainment"></div><div class="leftbar"><div class="checked">风景</div><div>名车</div><div>娱乐</div></div><div class="bottombar"></div></div>CSS样式部分:/* 为了布局⽅便,容器⾥⼤多采⽤的flex */#box {position: relative;width: 460px;height: 300px;margin: 40px auto;border: 1px solid rgb(109, 98, 98);user-select: none;}/* 侧边栏布局 */.leftbar {display: flex;flex-direction: column;justify-content: space-between;position: absolute;top: -1px;left: -80px;width: 80px;height: 100%;text-align: center;font-size: 20px;cursor: pointer;}.leftbar div {flex: 1;line-height: 100px;background-color: cadetblue;letter-spacing: 5px;}.leftbar div:nth-child(2) {border-top: 1px solid #fff;border-bottom: 1px solid #fff;}/* 底部切换按钮样式设计 */.bottombar {display: flex;justify-content: space-between;position: absolute;bottom: -1px;right: -1px;z-index: 10;width: 200px;height: 30px;cursor: pointer;}.bottombar div {flex: 1;line-height: 30px;background-color: rgb(232, 233, 235, .5);text-align: center;font-weight: 700;}.bottombar div~div {border-left: 1px solid grey;}img {position: absolute;display: block;width: 460px;height: 300px;}.show {z-index: 5;}.leftbar .checked,.bottombar .checked {background-color: rgb(241, 5, 5);}javascript逻辑实现部分:var Box = document.querySelector('#box'), pic = Box.querySelectorAll('.pic'), Idx = 0, index = 0, timer = null,ltDiv = Box.querySelector('.leftbar'), btDiv = Box.querySelector('.bottombar'), Img = Box.querySelectorAll('img');function createBtBar(len) {//动态创建底部切换按钮var str = '';for (var i = 0; i < len; i++) {str += `<div>${i + 1}</div>`;}btDiv.innerHTML = str;btDiv.children[0].classList.add('checked');}function initialize() {//页⾯初始状态createBtBar(pic[0].children.length);}initialize();function clearZindex() {//重置所有图⽚的定位层级for (var k = 0; k < Img.length; k++) {Img[k].classList.remove('show');}}ltDiv.addEventListener('click', (e) => {//侧边栏项⽬切换if (e.target.tagName.toLowerCase() === 'div') {for (var j = 0; j < ltDiv.children.length; j++) {ltDiv.children[j].classList.remove('checked');}clearZindex();Idx = 0;index = getEleIdx(e.target);ltDiv.children[index].classList.add('checked');pic[index].children[0].classList.add('show');createBtBar(pic[index].children.length);}});btDiv.addEventListener('click', (e) => {//委托监听底部切换按钮if (e.target.tagName.toLowerCase() === 'div') {function changePic(callback) {btDiv.children[Idx].classList.remove('checked');clearZindex();callback && callback();btDiv.children[Idx].classList.add('checked');pic[index].children[Idx].classList.add('show');}changePic(function () {Idx = getEleIdx(e.target);});}});function getEleIdx(item) {//获取DOM元素下标var elements = item.parentNode.children;for (var i = 0, len = elements.length; i < len; i++) {if (item === elements[i]) {return i;}}}function loopShow() {//循环⾃动展⽰clearInterval(timer);timer = setInterval(function () {pic[index].children[Idx].classList.remove('show');btDiv.children[Idx].classList.remove('checked');Idx += 1;if (Idx < 0 || Idx > pic[index].children.length - 1) {Idx = 0;}pic[index].children[Idx].classList.add('show');btDiv.children[Idx].classList.add('checked');}, 1000);}loopShow();Box.addEventListener('mouseover', function () {clearInterval(timer);//⿏标移⼊展⽰区停⽌轮播});Box.addEventListener('mouseout', function () {loopShow();//⿏标移出展⽰区⾃动轮播});具体实现的展⽰效果⼊下:(Tip: 各位注意⾃⾏准备图⽚放到⾃⼰的⽂件夹⾥哦~)以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

小程序实现多个选项卡切换

小程序实现多个选项卡切换实现选项卡切换功能的基本思路是在一个页面中创建多个选项卡，在用户点击不同选项卡时，动态改变显示的内容。

下面的步骤将指导您完成这一过程。

第一步：创建多个选项卡在小程序的wxml文件中，可以使用view组件来创建选项卡。

我们可以给每个选项卡一个独立的id用于区分不同的选项卡。

例如：```<view id="tab1" class="tab-item">选项卡1</view><view id="tab2" class="tab-item">选项卡2</view><view id="tab3" class="tab-item">选项卡3</view>```第二步：定义选项卡样式在小程序的wxss文件中，可以定义选项卡的样式。

这里我们可以使用flex布局来排列选项卡，并设置选中选项卡的颜色。

例如：```.tab-itemflex: 1;text-align: center;line-height: 50px;background-color: #ccc;.tab-item-activebackground-color: #ff0000;color: #fff;```第三步：实现选项卡切换的逻辑在小程序的js文件中，可以使用setData方法来改变选项卡的显示状态。

我们可以将用户点击的选项卡的id保存在data中，然后在wxml 文件中根据该id来确定选项卡的样式。

例如：```Pagedata:currentTab: 'tab1'},switchTab: function(e)this.setDatacurrentTab: e.target.id})}})```第四步：绑定选项卡点击事件在小程序的wxml文件中，我们需要给每个选项卡绑定一个点击事件，这样当用户点击选项卡时，就会触发相应的事件处理函数。

实现选项卡切换的三种方式

实现选项卡切换的三种⽅式⾸先我⽤Jquery库实现了⼀个简单的效果，只需要点击上⾯的导航标签即可切换下⽅内容，Html代码如下<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>tab切换</title><style type="text/css">*{padding:0;margin:0;font:normal 15px "微软雅⿊";color:#000;}ul{list-style-type: none;padding-left: 5px;margin-bottom: -2px}.tab{width:500px;margin: 10px auto}a{text-decoration: none;}.title li{display: inline-block;border: 1px solid #999;border-bottom: 2px solid #a00;background: #fff;text-align: center;width: 60px;height: 30px;margin: 0 1px;line-height: 30px} .title .active{border-top:2px solid #a00;border-bottom: 2px solid #fff; }#content{margin: 0;border: 1px solid #ccc;border-top: 2px solid #a00;width: 300px}#content div{display: none;padding: 10px 0}#content .mod{display: block;}</style></head><body><div class="tab"><ul class="title"><li class="active"><a href="#">房产</a></li><li><a href="#">家居</a></li><li><a href="#">⼆⼿房</a></li></ul><div id="content"><div class="mod"><ul><li><a href="#">房产内容1</a></li><li><a href="#">房产内容2</a></li><li><a href="#">房产内容3</a></li></ul></div><div class="mod" style="display: none"><ul><li><a href="#">家居内容1</a></li><li><a href="#">家居内容2</a></li><li><a href="#">家居内容3</a></li></ul></div><div class="mod" style="display: none"><ul><li><a href="#">⼆⼿房内容1</a></li><li><a href="#">⼆⼿房内容2</a></li><li><a href="#">⼆⼿房内容3</a></li></ul></div></div></div></body></html>View CodeJquery代码如下：<script type="text/javascript" src="jquery-3.0.0.min.js"></script><script type="text/javascript">$(function(){$(".title li").click(function(){// var $this=$(this);// alert($this.index());$(this).addClass("active").siblings().removeClass("active");$("#content .mod").eq($(".title li").index(this)).show().siblings("#content .mod").hide();});});</script>View Code相信⼤家⽤Jquery都是⽐较轻松，紧接着我⼜尝试了⽤源⽣的js代码来实现这种效果，效果图如下：实现所需的html代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{padding: 0;margin: 0;box-sizing: border-box}div{width: 70%;margin: 20px auto;}ul{list-style: none;overflow: hidden;}#nav{width: 400px;height: 40px;text-align: center;line-height: 40px;background: #c5c5c5;}#nav li{width: 25%;height: 40px;float: left;border: 1px solid #c5c5c5;border-bottom: none;}#nav li.active{background: #fff;}#content{width: 400px;height: 300px;position: relative;border: 1px solid #c5c5c5;border-top: none;}#content li{width: 100%;height: 100%;position: absolute;padding: 10px;display: none}</style></head><body><div><ul id="nav"><li class="active">选项⼀</li><li>选项⼆</li><li>选项三</li><li>选项四</li></ul><ul id="content"><li style="display: block">内容⼀</li><li>内容⼆</li><li>内容三</li><li>内容四</li></ul></div></body></html>View Codejs代码如下：<script type="text/javascript">var nav =document.getElementById("nav");var navlist = nav.children;var con = document.getElementById("content");var conlist = con.children;for (var i= 0;i<navlist.length;i++){navlist[i].index = i;navlist[i].onclick = function (){for (var m = 0;m< conlist.length;m++){navlist[m].className = "";conlist[m].style.display ="none";}this.className = "active";conlist[this.index].style.display = "block";}}</script>如果说⼤家在写页⾯的时候需要多次实现选项卡效果，但是⼜不想造成代码重复该怎么办呢？我们这时候可以使⽤函数封装概念来封装⼀个函数⽅法来实现多次调⽤。

简单实现js页面切换功能

简单实现js页⾯切换功能本⽂为⼤家介绍了js页⾯换肤功能处理原理（*需要在有服务器环境下测试使⽤*），供⼤家参考，具体内容如下原理：1.换肤是让页⾯采⽤不⽤的样式设置2.我们把要换肤的地⽅根据不⽤⽪肤做成多个样式表⽂件3.获取link的id4.修改link的href属性改变样式表5.采⽤了不⽤样式表，就是使⽤对应⽪肤样式6.利⽤cookie技术⽤户原则，⽤户再次打开页⾯也会采⽤上次选⽤⽪肤7.读取cookie要在页⾯载⼊开始，保证对应⽪肤css提前加载<html><head><title>js页⾯换肤功能</title><meta charset="utf-8"><link href="public.css" rel="stylesheet" type="text/css" /><link href="1.css" rel="stylesheet" type="text/css" id="skin" /><script type="text/javascript">/*js页⾯换肤功能处理原理1.换肤是让页⾯采⽤不⽤的样式设置2.我们把要换肤的地⽅根据不⽤⽪肤做成多个样式表⽂件3.获取link的id4.修改link的href属性改变样式表5.采⽤了不⽤样式表，就是使⽤对应⽪肤样式6.利⽤cookie技术⽤户原则，⽤户再次打开页⾯也会采⽤上次选⽤⽪肤7.读取cookie要在页⾯载⼊开始，保证对应⽪肤css提前加载*///读取cookie，换肤var skin=document.getElementById("skin");//拿到link元素var cookieval=document.cookie;var skipval=readcookie("skin");if(!skipval){//如果cookie不存在记录skin.href="1.css";}else{skin.href=skipval+".css";//有记录};window.onload=function(){//点击按钮换肤var skin1=document.getElementById("skin1");var skin2=document.getElementById("skin2");var skin3=document.getElementById("skin3");var Days = 30; //设置过期时间，30天以后var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);skin1.onclick=function(){skin.href="1.css";document.cookie = "skin=1;expires="+exp.toUTCString();};skin2.onclick=function(){skin.href="2.css";document.cookie = "skin=2;expires="+exp.toUTCString();};skin3.onclick=function(){skin.href="3.css";document.cookie = "skin=3;expires="+exp.toUTCString();};};//读取cookie指定值function readcookie(key){var skinval=false;var arrkv=cookieval.split(";");for(var i=0;i<arrkv.length;i++){var itemc=arrkv[i].split("=");if(itemc[0]==key){skinval=itemc[1];}else{};};return skinval;};</script></head><body><div class="header skinheader"><div class="skinchange"><input type="button" value="⽪肤1" id="skin1" /><input type="button" value="⽪肤2" id="skin2" /><input type="button" value="⽪肤3" id="skin3" /></div></div><div class="bodyer skinbodyer"><div class="con1">我是内容1</div><div class="con2">我是内容2</div><div class="con3">我是内容3</div></div><div class="footer skinfooter">我是尾部信息</div></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

原生js实现tab选项卡切换

原⽣js实现tab选项卡切换本⽂实例为⼤家分享了原⽣js实现tab选项卡切换效果的代码，供⼤家参考，具体内容如下1.html部分<body><div id="tab"><div class="tab_menu"><ul><li class="selected"><a href="#">时事</a></li><li><a href="#">体育</a></li><li><a href="#">娱乐</a></li></ul></div><div class="tab_box"><div>时事</div><div class="hide">体育</div><div class="hide">娱乐</div></div></div></body>2.css部分：样式部分实现⽅法多种多样，这是我写的简单的demo，我最不擅长的css ><....tab_menu .selected{background-color:#aaa;}.tab_menu ul{height:30px;}.tab_menu ul li{float:left;list-style:none;width:50px;height:30px;color:#000;border:solid 1px gray;border-bottom:none; text-align:center;line-height:30px;margin-right:3px;} .tab_menu ul li a{text-decoration:none;}.tab_box{width:170px;height:150px;border:solid 1px gray;}.tab_box .hide{display:none;}3.重要的js部分：window.onload=function(){var oTab=document.getElementById('tab');var aLi=oTab.getElementsByTagName('li');var oTabBox=oTab.getElementsByTagName('div')[1];var aBox=oTabBox.getElementsByTagName('div');for(var i=0;i<aLi.length;i++){aLi[i].index=i;aLi[i].onclick=function(){for(var j=0;j<aLi.length;j++){aLi[j].className='';//取消菜单样式aBox[j].className='hide';//隐藏所有的tabDiv}aLi[this.index].className='selected';aBox[this.index].className='';}}}这个简单粗暴，完全没有考虑如果tabMenu、tabBox有多个样式的情况，不适应项⽬只是⼀个思路。

JS实现滑动菜单效果代码（包括Tab,选项卡,横向等效果）

JS实现滑动菜单效果代码（包括Tab,选项卡,横向等效果）本⽂实例讲述了JS实现滑动菜单效果代码。

分享给⼤家供⼤家参考。

具体如下：这⾥实现⼀个特效将⽹页中的选项卡滑动门都集中到⼀个⽹页中来，有些同志曾经为同⼀个页⾯布置两个滑动门⽽烦恼，参考⼀下本例⼦，相信你会找到答案，⽽且有各种排列⽅式的选项卡，总有⼀款会满⾜你。

运⾏效果截图如下：在线演⽰地址如下：具体代码如下：12345678910 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml"lang="zh-CN"xml:lang="zh-CN"><head><title>选项卡</title><style type="text/css"></style></head><body><div id="tab01"><h3>⾸页</h3><div class="jj"><p>嘿嘿，⽆视div原始class值。

JavaScriptTAB栏切换效果的示例

JavaScriptTAB栏切换效果的⽰例代码实现：<!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栏切换效果的资料请关注其它相关⽂章！。

JavaScript实现tab栏切换的效果

JavaScript实现tab栏切换的效果tab栏：点击不同的标签，显⽰不同的内容，被点击的标签样式发⽣改变（突出选中的是哪⼀个）实现思路：1、将tab栏分为上下两部分，上⾯是导航列表，下⾯是各部分对应的内容。

把标签和内容都写出来，内容按照标签顺序依次顺着写，给标签都添加⾃定义属性- - -index，属性值从0开始，依次增加12、⾸先实现上⾯的效果，点击后样式切换，被点击的字体颜⾊、背景颜⾊改变等:①css定义⼀个类eg：current，⾥⾯定义改变后的样式，先给第⼀个标签写⼀个该类名，其他的不写类名，②js获取所有标签元素对象，- - -for循环- - -遍历给每个标签绑定- - -onclick点击事件③点击事件⾥⾯使⽤排他算法- - -for循环- - -将所有标签设置类名为空- - -className = ‘' ，然后当前被点击的标签设置上⾯定义的特殊类名- - -this.className = ‘current';3、实现下⾯，根据点击的标签，出现不同的内容：①css将第⼀个标签对应内容显⽰，其他的都隐藏起来：.box-tb .item:nth-child(n+2) {display: none;}②获取内容的全部元素对象，获取标签的index值，在点击事件⾥再添加⼀个排他思想代码- - -for循环- - -遍历内容的元素对象，将所有内容设置隐藏- - -items[i].style.display = ‘none';然后根据被点击的标签，将对应的内容显⽰- - -items[index].style.display = ‘block';代码⽰例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tab栏切换</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.box {width: 600px;margin: 100px auto;}.box-th {overflow: hidden;width: 100%;background-color: #88ace6;}.box-th ul li {float: left;width: 90px;height: 20px;margin-right: 10px;padding: 5px;text-align: center;}.current {color: #fff;background-color: green;}.box-tb {margin-top: 20px;}.box-tb .item:nth-child(n+2) {display: none;}</style></head><body><div class="box"><div class="box-th"><ul><li data-index="0" class="current">春</li><li data-index="1">夏</li><li data-index="2">秋</li><li data-index="3">冬</li></ul></div><div class="box-tb"><div class="item">春季排四季之⾸，新的轮回从此开启。

基于javascript实现最简单的选项卡切换效果

本文实例为大家分享了js选项卡切换效果的具体实现代码，供大家参考，具体内容如下<!DOCTYPE html><html><head><meta charset="gb2312" /><title>朱朱制作</title><script src="js/jquery.js" type="text/javascript"></script><style>  *{    margin: 0;    padding: 0;  }  body{    background-color: #fff;    font-family: "微软雅黑";    font-size: 18px;    width: 1000px;    margin: 50px auto;    color:#000000;  }  .wrapper{    width: 350px;  }  #nav ul{    border-bottom: 2px solid yellowgreen;    height: 32px;  }  #nav li{    display: inline-block;    border: 2px solid #999;    border-bottom: none;    margin-left: 10px;    width: 65px;    text-align: center;    line-height: 30px;  }  #nav li:hover{    cursor: pointer;  }  #content{    display: block;    border: 1px solid blue;    border-top: none;    text-align: center;    height: 100px;    line-height: 100px;  }  #nav li.on{    border-bottom: solid 2px #ffffff;  }  .hide{    display: none;  }  .show{    display: block;  }</style></head><script type="text/javascript">  /*window.onload=change; //js代码实现  function change(){  this.nav=document.getElementById("nav");  this.li=nav.getElementsByTagName("li");  this.cont=document.getElementById("content");  this.divi=cont.getElementsByTagName("div");  for(var i=0;i<li.length;i++){    li[i].index=i;    li[i].onclick=function(){      for(var i=0;i<li.length;i++){      li[i].className="";      divi[i].className="hide";      }    li[this.index].className="on";    divi[this.index].className="show";    }  }}*/$(function(){$('#nav li').each(function(){  $(this).click(function(){    $('#nav li').removeClass("on");    $(this).addClass("on");    $("#content div").removeClass();    $("#contentdiv").eq($(this).index()).addClass("show").siblings().addClass("hide");})})})</script><body>  <div class="wrapper">    <div id="nav">      <ul>        <li class="on">num1</li>        <li>num2</li>        <li>num3</li>        <li>num4</li>      </ul>    </div><div id="content">      <div class="show">content1</div>      <div class="hide">content2</div>      <div class="hide">content3</div>      <div class="hide">content4</div>    </div>  </div></body></html>以上就是本文的全部内容，希望对大家的学习有所帮助。

JavaScript实现简易tab栏切换案例

JavaScript实现简易tab栏切换案例本⽂实例为⼤家分享了JavaScript实现简易tab栏切换效果的具体代码，供⼤家参考，具体内容如下1. tab栏-案例1tab栏分析li⾥⾯的分析js实现隐藏与显⽰排他思想：1）、所有元素全部清除样式（⼲掉其他⼈）2）、给当前元素设置样式（留下我⾃⼰）3）、注意顺序不能颠倒，⾸先⼲掉其他⼈，再设置⾃⼰我的思路：代码实现：<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}a {text-decoration: none;color: #666;}.vertical-tab {width: 980px;margin: 100px auto;}.vertical-tab .nav {width: 200px;list-style: none;}.vertical-tab .nav-tabs1 {float: left;border-right: 3px solid #e7e7e7;}.vertical-tab .nav-tabs2 {float: right;border-left: 3px solid #e7e7e7;}.vertical-tab li a {display: block;padding: 10px 20px;text-align: center;text-transform: uppercase;letter-spacing: 1px;font-size: 18px;font-weight: 700;}.vertical-tab .active {color: #198df8;}.vertical-tab .tabs {width: 500px;float: left;}.vertical-tab .tab-content {padding: 10px 20px;text-transform: uppercase;letter-spacing: 1px;}.vertical-tab .tab-content h3 {color: #333;margin: 0 0 10px 0;}.vertical-tab .tab-content p {font-size: 12px;}.vertical-tab .hidden {display: none;}</style></head><body><div class="vertical-tab"><ul class="nav nav-tabs1"><li><a href="javascript:;" class="active" index="1">section 1</a></li> <li><a href="javascript:;" index='2'>section 2</a></li><li><a href="javascript:;" index="3">section 3</a></li></ul><div class="tab-content tabs"><div class="tab-content1"><h3>section 1</h3><p>content 1</p></div><div class="tab-content1 hidden"><h3>section 2</h3><p>content 2</p></div><div class="tab-content1 hidden"><h3>section 3</h3><p>content 3</p></div><div class="tab-content1 hidden"><h3>section 4</h3><p>content 4</p></div><div class="tab-content1 hidden"><h3>section 5</h3><p>content 5</p><div class="tab-content1 hidden"><h3>section 6</h3><p>content 6</p></div></div><ul class="nav nav-tabs2"><li><a href="javascript:;" index="4">section 4</a></li><li><a href="javascript:;" index="5">section 5</a></li><li><a href="javascript:;" index="6">section 6</a></li></ul></div><script>var as = document.querySelectorAll("a")var item = document.querySelectorAll(".tab-content1")console.log(as)// console.log(lis)for (var i = 0; i < as.length; i++) {as[i].addEventListener('click', function() {// ⼲掉其他⼈for (var j = 0; j < as.length; j++) {as[j].className = ''}// 留下⾃⼰this.className = "active"// 显⽰内容var index = this.getAttribute('index')console.log(index)// ⼲掉其他⼈for (var i = 0; i < item.length; i++) {item[i].style.display = "none"}// 留下⾃⼰item[index - 1].style.display = "block"})}</script></body></html>vue实现vue实现起来相对简单，只需要灵活运⽤v-if和v-for具体代码：<!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;}.vertical-tab {width: 920px;margin: 100px auto;}.vertical-tab .nav {list-style: none;width: 200px;}.vertical-tab .nav-tabs1 {border-right: 3px solid #e7e7e7;}.vertical-tab .nav-tabs2 {border-left: 3px solid #e7e7e7;}.vertical-tab .nav a {display: block;font-size: 18px;font-weight: 700;text-align: center;letter-spacing: 1px;text-transform: uppercase;padding: 10px 20px;margin: 0 0 1px 0;text-decoration: none;}.vertical-tab .tab-content {color: #555;background-color: #fff;font-size: 15px;letter-spacing: 1px;line-height: 23px;padding: 10px 15px 10px 25px;display: table-cell;position: relative;}.vertical-tab .nav-tabs1 {float: left;}.vertical-tab .tabs {box-sizing: border-box;float: left;}.vertical-tab .tab-content h3 {font-weight: 600;text-transform: uppercase;margin: 0 0 5px 0;}.vertical-tab .nav-tabs2 {float: right;}.tab-content {position: relative;}.tab-content .tab-pane {position: absolute;top: 10px;left: 20px;}.nav li.active a {color: #198df8;background: #fff;border: none;}.fade {opacity: 0;transition: all .3s linear;}.fade.active {opacity: 1;}</style></head><body><div class="vertical-tab" id="app"><ul class="nav nav-tabs1"><li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li> </ul><div class="tab-content tabs"><div class="tab-pane fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'><h3>{{item.title}}</h3><p>{{item.content}}</p></div></div><ul class="nav nav-tabs2"><li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li> </ul></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: "#app",data: {currentIndex: 0, // 选项卡当前的索引list: [{id: 1,title: 'Section 1',content: 'content1'}, {id: 2,title: 'Section 2',content: 'content2'}, {id: 3,title: 'Section 3',content: 'content3'}, {id: 4,title: 'Section 4',content: 'content4'}, {id: 5,title: 'Section 5',content: 'content5'}, {id: 6,title: 'Section 6',content: 'content6'}]},methods: {change(index, flag) {if (flag) {console.log(index)this.currentIndex = index;} else {this.currentIndex = index;}}}})</script></body>如果⼤家还想深⼊学习，可以点击两个精彩的专题：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js实现简单选项卡与自动切换效果的方法

js实现简单选项卡与⾃动切换效果的⽅法本⽂实例讲述了js实现简单选项卡与⾃动切换效果的⽅法。

分享给⼤家供⼤家参考。

具体分析如下：这⾥再上篇《》基础上，进⼀步实现可以⾃动切换的切换效果，⽤这种效果就可以做简单的焦点图了。

说明：设置⼀个标识数字置为0，写⼀个每过⼏秒标识+1,执⾏切换效果的函数，然后执⾏。

当标识超过当前选项卡长度让标识置为0。

在⿏标移到选项卡的时候关闭定时器，⿏标移⾛的时候打开定时器。

<!DOCTYPE html><html><head><meta charset="gb2312" /><title>⽆标题⽂档</title><style>body,ul,li{margin:0;padding:0;font:12px/1.5 arial;}ul,li{list-style:none;}.wrap{width:500px;margin:20px auto;}.hide{display:none;}#tab_t{height:25px;border-bottom:1px solid #ccc;}#tab_t li{float:left;width:80px;height:24px;line-height:24px;margin:0 4px;text-align:center;border:1px solid #ccc;border-bottom:none;background:#f5f5f5;cursor:pointer}#tab_t .act{position:relative;height:25px;margin-bottom:-1px;background:#fff;}#tab_c{border:1px solid #ccc;border-top:none;padding:20px;}</style><script>window.onload = function(){tab("tab_t","li","tab_c","div","onmouseover")function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){var tab_t = document.getElementById(tab_t);var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);var tab_c = document.getElementById(tab_c);var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);var len = tab_t_li.length;var i=0;var timer = null;var num=0;for(i=0; i<len; i++){tab_t_li[i].index = i;tab_t_li[i][evt] = function(){clearInterval(timer);num = this.index;tab_change()}tab_t_li[i].onmouseout = function(){autoplay();}}function tab_change(){for(i=0; i<len; i++){tab_t_li[i].className = '';tab_c_li[i].className = 'hide';}tab_t_li[num].className = 'act';tab_c_li[num].className = '';}function autoplay(){timer = setInterval(function(){num++;if(num>=len) num=0;tab_change();},1000);}autoplay();}}</script></head><body><div class="wrap"><ul id="tab_t"><li class="act">选择1</li><li>选择2</li><li>选择3</li><li>选择4</li></ul><div id="tab_c"><div>内容1</div><div class="hide">内容2</div><div class="hide">内容3</div><div class="hide">内容4</div></div></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

24.1 使用JavaScript 创建选项卡切换内容块[共3页]

342 第24
章
JavaScript经典实例本章将介绍目前网站中比较常用的几个实例，其中每个实例都整合使用了JavaScript+CSS两方面的相关知识。

24.1 使用JavaScript创建选项卡切换内容块
使用选项卡切换内容块，可以在有限的空间显示更多内容。

这种方法在网易、腾讯、搜狐、新浪等各大门户网站上被大量使用，如图24-1就是网易主页中的一个选项卡切换块。

图24-1 网易主页选项卡切换块
下面我们将介绍使用JavaScript+CSS创建类似于图24-1所示的选项卡切换块实例。

1．实例描述
默认显示选项卡1的内容，当将鼠标移到其他选项卡上时，显示该选项卡对应的内容。

效果如图24-2所示。

图24-2 实例的选项卡切换块效果。

js实现tab选项卡切换

js实现tab选项卡切换　初始状态，只展⽰tab1的内容　点击tab2，只展⽰tab2的内容　通过原⽣js实现tab切换，⾸先讲解⼀下实现的原理。

1.点击按钮⾸先给这个被点击的按钮添加⼀个active类，给点击的改变背景⾊ 2.点击按钮其实就是把相应的div给显⽰出来。

需要注意的是，点击按钮，给按钮添加了⼀个类和把对应的div给显⽰，需要把上⼀个点击的按钮颜⾊还原和上⼀个按钮对应的div 给隐藏，我是通过点击前，把所有按钮和div给恢复初始状　态，代码如下1 <html>23 <head>4 <title></title>5 </head>6 <style>7 div{8 display:none;9 }10 .active{11 background:yellow;12 }13 </style>14 <script>15 window.onload=function(){16var aInput=document.getElementsByTagName('input');//获取到所有的input按钮,aInput是⼀个数组17var aDiv=document.getElementsByTagName('div'); //获取到所有的div,aDiv是⼀个数组18for(var i=0;i<aInput.length;i++){ //按钮数组19 aInput[i].index=i; //i是按钮数组的下标,把i赋值给index,这样通过index就知道点击的是哪个按钮20 aInput[i].onclick=function(){21for(var j=0;j<aInput.length;j++){ //通过点击按钮的时候再次循环按钮，是为了清空active类22 aInput[j].className='' //清空active类2324 }25for(var i=0;i<aDiv.length;i++){ //把所有的divde的display重新设置为none，就是不显⽰26 aDiv[i].style.display='none'27 }28 aInput[this.index].className='active' //点击哪个按钮就哪个按钮加active类29 aDiv[this.index].style.display='block' //点击哪个按钮就把第⼏个div给显⽰出来30 }31 }32 }33 </script>34 <body>35 <input type="button" id="div1" value="tab1" index="0" />36 <input type="button" value="tab2" index="1"/>37 <input type="button" value="tab3" index="2"/>38 <input type="button" value="tab4" index="3"/>3940 <div style="display:block">显⽰tab1</div>41 <div>显⽰tab2</div>42 <div>显⽰tab3</div>43 <div>显⽰tab4</div>4445 </body>4647 </html>。

JS+CSS简洁的滑动门选项卡菜单

JS+CSS简洁的滑动门选项卡菜单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><title>JS+CSS简洁的滑动门/选项卡菜单丨芯晴网页特效丨</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">ul,li{margin:0;padding:0;}.tabBox{width:268px;margin:20px;}ul.tabTag{height:28px;border-bottom:1px solid #000;list-style:none}ul.tabTag li{float:left;line-height:27px;height:27px;padding:0 18px;color:#ccc;border:1px solid #ccc;border-bottom:none;margin-right:5px;background:#fff;cursor:pointer;} ul.tabTag li.active{border-color:#000;background:#eee;color:red;position:relative;top:1px;} .tabCon{border:1px solid #000;border-top:none;background:#fff;}.tCon{display:none;background:#eee;padding:25px;}</style><script type="text/javascript">/*Author: wubai，QQ:464216089，By: 2012.4.7*/function tabMenu(tabBox,navClass){vartabNavLi=document.getElementById(tabBox).getElementsByTag Name("ul")[0].getElementsByTagName("li");vartabCon=document.getElementById(tabBox).getElementsByTagN ame("div")[0].getElementsByTagName("div");var tabLens=tabCon.length;for(var i=0;i<tabLens;i++){//应用js闭包传入参数i作为当前索引值赋值给m(function(m){tabNavLi[m].onmouseover = function(){for(var j=0; j<tabLens; j++){tabNavLi[j].className = (j==m)?navClass:"";tabCon[j].style.display = (j==m)?"block":"";}}})(i);}}//函数调用window.onload=function(){tabMenu("tabBox1","active");tabMenu("tabBox2","active");}</script></head><body><div id="tabBox1" class="tabBox"><ul class="tabTag"><li class="active">新闻1</li><li>体育1</li><li>财经1</li></ul><div class="tabCon"><div class="tCon" style="display:block">新闻1内容</div> <div class="tCon">体育1内容</div><div class="tCon">财经1内容</div></div></div><div id="tabBox2" class="tabBox"><ul class="tabTag"><li class="active">新闻2</li><li>体育2</li><li>财经2</li></ul><div class="tabCon"><div class="tCon" style="display:block">新闻2内容</div> <div class="tCon">体育2内容</div><div class="tCon">财经2内容</div></div></div></body></html><br><br><hr><p align="center"><font color=black>本特效由<a href="" target="_blank">芯晴网页特效</a>丨收集于互联网，只为兴趣与学习交流，不作商业用途。

js实现点击切换卡片功能

js实现点击切换卡⽚功能本⽂实例为⼤家分享了js实现点击切换卡⽚功能的具体代码，供⼤家参考，具体内容如下在实际应⽤中，点击或者移⼊某⼀元素上，弹出下拉菜单或者页⾯，是⽹页设计的常见操作。

下⾯我们实现⼀种点击菜单实现菜单切换，使⽤js提供三种⽅式实现该功能。

1.使⽤html设计基本结构<body><h2>多Tab点击切换</h2><ul id="tab"><li id="tab1" value="1">10元套餐</li><li id="tab2" value="2">30元套餐</li><li id="tab3" value="3">50元包⽉</li></ul><div id="container"><div id="content1">10元套餐详情：<br/> 每⽉套餐内拨打100分钟，超出部分2⽑/分钟</div><div id="content2" style="display: none">30元套餐详情：<br/> 每⽉套餐内拨打300分钟，超出部分1.5⽑/分钟</div><div id="content3" style="display: none">50元包⽉详情：<br/> 每⽉⽆限量随⼼打</div></div></body>2.使⽤css设计基本样式<style>* {margin: 0;padding: 0;}#tab li {float: left;list-style: none;width: 80px;height: 40px;line-height: 40px;cursor: pointer;text-align: center;}#container {position: relative;}#content1, #content2, #content3 {width: 300px;height: 100px;padding: 30px;position: absolute;top: 40px;left: 0;}#tab1, #content1 {background-color: #ffcc00;}#tab2, #content2 {background-color: #ff00cc;}#tab3, #content3 {background-color: #00ccff;}</style>3.js实现点击切换功能//原⽣jsvar container=document.querySelectorAll('#container>div')var event_li=document.querySelectorAll('#tab>li')var currentindex=0for(var i=0;i<event_li.length;i++){event_li[i].num=ievent_li[i].onclick=function(){container[currentindex].style.display='none'var index_other=this.numcontainer[index_other].style.display='block'currentindex=index_other}}//jQuery实现，点击⼀下⽗元素，⼦元素全部display_none，再将点击事件的元素的⼦元素设置为display_blockvar $container=$('#container>div')$('#tab>li').click(function(){$container.css('display', 'none')var index=$(this).index()var index_other=$(this).val()-1$container[index_other].style.display = 'block'})//jQuery实现，点击⼀下⽗元素，最开始的元素的⼦元素display_none，再将点击事件的元素的⼦元素设置为display_blockcurrentindex=0$('#tab>li').click(function(){$($container[currentindex]).css('display', 'none')var index=$(this).index()$container[index].style.display = 'block'currentindex=index})4.总结(1)、原⽣js就可以实现点击切换的功能，但是使⽤jQuery后更为容易，语法简单，却功能强⼤。

JS实现Tab栏切换案例

JS实现Tab栏切换案例要求：当⿏标点击上⾯相应的选项卡（tab），下⾯页⾯的内容也随之⽽改变。

结构分析：全部的内容都放到⼀个⼤的盒⼦⾥⾯，盒⼦⾥⾯⼜可以分为上⾯和下⾯两个盒⼦。

上⾯的盒⼦放了 5个li，装着5个⼩的选项卡，默认会有⼀个被选中；下⾯的盒⼦也包含了 5个 div 模块，模块内容与上⾯的选项⼀⼀对应，当前默认的只有第⼀个 div会被显⽰出来。

实现思路：点击切换选项卡部分Tab 栏切换有2个⼤的模块1、上⾯模块的选项卡，点击某⼀个，改变当前样式，底⾊变为红⾊，字体颜⾊变为⽩⾊。

⽽其他的选项卡样式不发⽣改变（排他思想）通过修改类名的⽅式实现。

2、下⾯模块的内容，会随着上⾯的选项卡变化。

所以下⾯模块变化写到点击事件⾥⾯。

规律：下⾯的模块显⽰的内容和上⾯选项卡⼀⼀对应，相匹配。

核⼼思路：给上⾯模块⾥⾯所有的 li 添加⾃定义属性，属性值从 0 开始作为索引号。

排他思想：通过 for循环遍历数组中的元素，进⼊循环之后⾸先消除所有部分的样式，接着再为所点击的当前部分添加样式。

通过setAttribute（name，value）创建⾃定义属性，name指的是为元素设置的⾃定义属性，value为⾃定义属性添加的属性值。

通过 getAttribute（name）获取元素的属性。

name是属性的名称。

默认第⼀个选项卡对应的下⾯模块是显⽰的，需要在添加⾏内样式（style='display:block'）因为CSS⾏内样式的优先级⾼于外部样式，会优先显⽰。

⽽（items[index].style.display = 'block';）这⼀句也相当于创建了⾏内样式。

实现代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Tab栏切换</title><style>*{margin:0;padding:0;}.tab{width:800px;height:45px;border:1px solid #ccc;border-bottom:1px solid #c81623;background: #fafafa;position:relative;margin:100px auto;}.tab_list li{width:160px;height:45px;list-style:none;line-height:45px;text-align: center;float:left;}.tab_list .current{background-color:#c81623;color:#fff;}.item{width:800px;height: 200px;padding-top:40px;/*line-height:200px;*/font-size: 30px;color:#fff;text-align: center;text-shadow:2px 2px 4px #000000;background: #efefef;/*opacity: 0.8;*/top:47px;position:absolute;}</style></head><body><div class='tab'><div class='tab_list'><ul><li class='current'>个性推荐</li><li>歌单</li><li>主播电台</li><li>排⾏榜</li><li>歌⼿</li></ul></div><div class='tab_con'><div class="item one" style='display:block'>每⽇歌曲推荐</div><div class="item two">精品歌单倾⼼推荐，给最懂⾳乐的你</div><div class="item thr">上瘾烟嗓情感之声</div><div class="item fou">新歌飙升榜</div><div class="item fiv">歌⼿排⾏榜</div></div></div><!-- tab 栏切换有2个模块模块的选项卡，点击其中的某⼀个，被点击的这⼀个底⾊将变成红⾊的，其余的不变（排他思想）使⽤修改类的名称的⽅式。

微信小程序实现单选选项卡切换效果

微信⼩程序实现单选选项卡切换效果这⾥展⽰⼀个⼯作中⽤到的微信⼩程序的单选选项卡切换效果的制作⽅法，供⼤家参考，具体内容如下效果如图：wxml:<view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"><view class="choosebtn {{idx==currentidx&&choose==true?'choosedbtn':'choosenobtn'}}"></view><text>{{idx==currentidx&&choose==true?text:textTwo}}</text></view>wxss:.item {width: 100%;height: 120rpx;background: #f5f5f5;display: flex;flex-direction: row;align-items: center;margin-bottom: 20rpx;}.item .choosebtn {width: 60rpx;height: 60rpx;border-radius: 50%;margin-left: 40rpx;}.item .choosenobtn {background: #c0c0c0;}.item .choosedbtn {background: #87ceeb;}.item text {margin-left: 30rpx;}js:Page({data: {// 让所有的选项都成为未选中状态choose: false,// ⽤来循环展⽰的数据data: [1, 2, 3],text: '选中了',textTwo: '没选中'},// 点击选项卡时的jschooseItem: function (e) {//记录上次点击的对象的序号var oldidx = this.data.currentidx;//记录当前点击的对象的序号var currentidx = e.currentTarget.dataset.idx;if (oldidx == currentidx) {var choose = this.data.choose;this.setData({currentidx: currentidx,choose: !choose})} else {this.setData({currentidx: currentidx,choose: true});}}})以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

很实用的js选项卡切换效果

很实⽤的js选项卡切换效果本⽂实例为⼤家分享了js实现简单的选项卡切换效果的具体代码，供⼤家参考，具体内容如下js选项卡切换代码：<!DOCTYPE html><html><head lang="en"><meta charset="gb2312"><title>实践题 - 选项卡</title><style type="text/css">*{margin:0px;padding:0px;}#tab{margin:10px;}#tab ul{list-style:none;height:36px;border-bottom:2px solid black ;display:block;}#tab ul li{float:left;display:inline-block;padding:0px 15px;height:34px;line-height:34px;margin-right:5px;border:1px solid #ccc;border-bottom:none;cursor:pointer;}#tab div{padding:5px;border:1px solid #ccc;border-top:none;}#tab ul li.on{border-top:2px solid black;border-bottom: 2px solid white;}.hide{display:none;}</style><script type="text/javascript">window.onload=function(){var mytab =document.getElementById("tab");var myul=mytab.getElementsByTagName("ul")[0];var myli=myul.getElementsByTagName("li");var mydiv=mytab.getElementsByTagName("div");// alert(mydiv.length)for(i=0,len=myli.length;i<len;i++){myli[i].index=i;myli[i].onclick=function(){for(var n=0;n<len;n++){myli[n].className="";mydiv[n].className="hide";}this.className="on";mydiv[this.index].className="";}}}</script></head><body><div id="tab"><ul><li class="on">房产</li><li>家居</li><li>⼆⼿房</li></ul><div>275万购昌平邻铁三居总价20万买⼀居200万内购五环三居 140万安家东三环北京⾸现零⾸付楼盘 53万购东5环50平京楼盘直降5000 中信府公园楼王现房</div><div class="hide">40平出租屋⼤改造美少⼥的混搭⼩窝经典清新简欧爱家 90平⽼房焕发新⽣新中式的酷⾊温情 66平撞⾊活泼家居瓷砖就像选好⽼婆卫⽣间烟道的设计</div><div class="hide">通州豪华3居260万⼆环稀缺2居250w甩西3环通透2居290万 130万2居限量抢购黄城根⼩学学区仅260万 121平70万抛!独家别墅280万苏州桥2居优惠价248万</div></div></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

vue.js实现选项卡切换

vue.js实现选项卡切换因为前端课要交⼀个⼤作业，刚好⼯作室的项⽬需要⼀个后台管理界⾯，就⾃学了⼀下vue，今天做了⼀个选项卡切换，最开始的作为菜鸡是⽤的js做的，太难了T.T，后⾯学了bootstrap就直接⽤的组件。

今天⽤了感觉太棒了！⽐bootstrap的组件好⽤⼀、实现原理我是⽤的点击事件进⾏更改data数据的值，v-if指令根据数据的变化来显⽰/隐藏内容的1、设置1个content数组，⽤来存储6个选项内容是否显⽰的boolean值，默认第⼀个显⽰new Vue({el:".body",data:{a:123,content:[true,false,false,false,false,false]}}2、在选项内容中使⽤v-if指令<div class="main-content h-100"><div v-show="content[0]" class="h-100 bg-warning" id="item-user">⽤户中⼼<div v-show="content[1]" class="h-100" id="">内容管理</div><div v-show="content[2]" class="h-100" id="">消息推送</div><div v-show="content[3]" class="h-100" id="">数据统计</div><div v-show="content[4]" class="h-100" id="">运营</div><div v-show="content[5]" class="h-100" id="">后台管理账户，权限</div></div>3、在methods中写⼀个点击事件，根据事件的参数，把相应位置的content值为true，其他置为false这⾥遇到⼀个错误，直接赋值会⽆效，因为data中的数组不能够通过下标直接更改数组中的数据，要通过this.$set(this.arr,index,newVal);⽅法来设置，或者直接赋值新数组new Vue({el:".body",data:{a:123,content:[true,false,false,false,false,false]},methods:{switchItem:function (item) {console.log(item)for (let i = 0; i <6; i++) {if(i==item){this.$set(this.content,i,true);} else{this.$set(this.content,i,false);}}}}})4、选项绑定点击事件<ul class="list-unstyled left-ul"><li class="bg-warning nav-item"><a @click="switchItem (0)" href="#person">⽤户中⼼</a></li><li class="bg-info "><a @click="switchItem (1)" href="#content">内容管理</a></li><li class="bg-dark "><a @click="switchItem (2)" href="#notification">消息推送</a></li><li class="bg-success "><a @click="switchItem (3)" href="#data">数据统计</a></li><li class="bg-warning "><a @click="switchItem (4)" href="#operate">运营</a></li><li class="bg-info"><a @click="switchItem (5)" href="#system">系统设置</a></li></ul>⼆、实现效果以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

Vue.js组件tab实现选项卡切换

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: 0}#app{width: 500px;height: 300px;margin: 0 auto;background-color: #ddd;}.top{height: 50px;line-height: 50px;width: 100%;background-color: #999;}.top ul li{display: inline-block;margin:0 10px;}.top ul li a{text-decoration: none;color: white;}.bottom{}</style></head><body><div id="app"><div class="top"><ul><li><a href="javascript:;" @click='tabToggle(tab01Text);'>{{tab01Text}}</a></li><li><a href="javascript:;" @click='tabToggle(tab02Text);'>{{tab02Text}}</a></li><li><a href="javascript:;" @click='tabToggle(tab03Text);'>{{tab03Text}}</a></li></ul></div><div class="bottom"><component :is='currentView' keep-alive></component></div></div><script type="text/javascript" src='vue.js'></script><script>var tab01 = Vue.extend({template:'<p>This is tab01</p>'})var tab02 = Vue.extend({template:'<p>This is tab02</p>'})var tab03 = Vue.extend({template:'<p>This is tab03</p>'})var app = new Vue({el:'#app',data:{tab01Text:'tab01',tab02Text:'tab02',tab03Text:'tab03',currentView:'tab01'},components:{tab01:tab01,tab02:tab02,tab03:tab03},methods:{tabToggle:function(tabText){this.currentView=tabText}}})</script></body></html>本⽂已被整理到了《》，欢迎⼤家学习阅读。