tab切换实现方式1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tab切换回顾</title><style>* {margin: 0;padding: 0;list-style: none;}#wrap {width: 600px;margin: 100px auto 0;overflow: hidden;}#tit {height: 30px;}#tit span {float: left;width: 200px;height: 30px;line-height: 30px;text-align: center;font-size: 18px;background: #ccc;}#tit span.select {background: #333;color: #ccc;}#con {width: 560px;padding: 20px;overflow: hidden;background: pink;}#con li {height: 200px;line-height: 200px;text-align: center;font-size: 100px;display: none;}#con li.show {display: block;}</style>
</head>
<body><div id="wrap"><div id="tit"><span class="select">选项一</span><span>选项二</span><span>选项三</span></div><ul id="con"><li class="show">1111</li><li>2222</li><li>3333</li></ul></div><script>var tit = document.getElementById('tit');var con = document.getElementById('con');var spans = tit.children;var lis = con.children;// console.log(lis.length);for (var i = 0; i < spans.length; i++) {spans[i].index = i;spans[i].onclick = function() {for (var i = 0; i < spans.length; i++) {spans[i].className = '';lis[i].className = '';}this.className = 'select';lis[this.index].className = 'show';}}</script>
</body>
</html>

转载于:https://www.cnblogs.com/handsomehan/p/5910046.html

tab切换实现方式1相关推荐

vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
uniapp滑动切换tab标签_Web前端，Tab切换，缓存，页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略)/ ...
javascript回车完美实现tab切换功能
javascript回车完美实现tab切换功能 javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过exce ...
简单的Tab切换组件
由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /*** 简单的Tab切换* 支持可配置项如下参数 */function Tab(){this.config = {type ...
css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
解决swiper在tab切换时，swiper不生效，以及display:none后，无法自动滑动的问题
解决swiper在tab切换时,swiper不生效,以及display:none后,无法自动滑动的问题问题是这样的:当你兴高采烈的写完一个tab,并且把swiper嵌入到每一个tab item 觉得 ...
VUE实现Tab切换
VUE中实现Tab切换方式,需要用到以下知识点: 1.动态绑定class,用于导航高亮显示 :class="{active:cur==0}"复制代码 2.click点击事件,用于改 ...
js利用tab键切换当前页面_JavaScript跳转到指定页面并且到指定的tab切换窗口
JavaScript跳转到指定页面并且到指定的tab切换窗口案例的解析就是点击A页面的第一个的切换窗口的按钮跳转到B页面,再点击B页面的按钮跳转到A页面的第二个窗口,这个实现的效果有三种方法,下面的 ...
html导航页面转换,纯CSS实现导航栏Tab切换效果
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现.下面看看如何使用 CSS ...

tab切换实现方式1

tab切换实现方式1：

tab切换实现方式1相关推荐

最新文章

热门文章