Tab选项卡的原生写法
关键点:建立点击事件和显示事件的连接,即点li 1让对应的div1出来,很容易想到遍历、索引
*{margin:; padding:;}
ul,li{list-style: none;}
.tab{background: rgba(2, 153, 255, 0.31); width:350px; height:200px; overflow: hidden;}
.tab ul{overflow: hidden; background: #359df6;}
.tab ul li{float: left; width: 80px; height: 40px; line-height: 40px; text-align: center;}
.tab ul li.selected{background: red; color: #fff;}
.tab div{display: none;}
.tab div.selected{display: block;}
<div class="tab" id="tab">
<ul>
<li class="selected">li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
<div class="selected">div 1</div>
<div>div 2</div>
<div>div 3</div>
</div>
var oTab = document.getElementById("tab");
var oLis = oTab.getElementsByTagName("li");
var oDivs = oTab.getElementsByTagName("div");
for (var i = 0; i < oLis.length; i++) {
//这是自定义属性的写法
/*oLis[i].index=i;
oLis[i].onclick=function(){
for(var j=0;j<oDivs.length;j++){
oLis[j].className="";
oDivs[j].className="";
}
oLis[this.index].className="selected";
oDivs[this.index].className="selected";
}*/ //这是闭包的写法
(function aaa(index) {
oLis[index].onclick = function (i) {
for (var j = 0; j < oDivs.length; j++) {
oLis[j].className = "";
oDivs[j].className = "";
}
oLis[index].className = "selected";
oDivs[index].className = "selected";
}
})(i)
}
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
//这个是jquery的写法,该方法可以写一个,用于一个页面中的多个tab,只要结构一样。
$(".tab li").click(function(){
var $index=$(this).index();
$(this).addClass("selected").siblings().removeClass("selected");
$(this).parent().siblings().each(function(index,item){
index === $index ? $(item).addClass("selected") : $(item).removeClass("selected");
})
})
Tab选项卡的原生写法的更多相关文章
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生tab选项卡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
- react tab选项卡切换
Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
- 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
- LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
- 基于CkEditor实现.net在线开发之路(4)快速布局,工具箱,模板载入,tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...
随机推荐
- assign retain copy
举个例子: NSString *houseOfMM = [[NSString alloc] initWithString:'装梵几的三室两厅']; 上面一段代码会执行以下两个动作: 1 在堆上分配一 ...
- 验证mySqli扩展是否
<?php// createTime: 2016/9/9 21:57 //验证mySqli扩展是否//phpinfo(); //2.检测扩展是否已经加载//var_dump(extension_ ...
- 4、Hibenrate中HQL的10中查询方式
二.具体事例如下: 2.0 编写如下sql语句 )); create sequence seq_teacher; insert into teacher values(seq_teacher.next ...
- Yii2.0官方高级模板的目录结构分析
Yii 是什么 Yii 是一个高性能,基于组件的 PHP 框架,用于快速开发现代 Web 应用程序.名字 Yii (读作 易)在中文里有"极致简单与不断演变"两重含义,也可看作 Y ...
- Git单独checkout子目录
http://schacon.github.io/git/git-read-tree.html#_sparse_checkout Existing Repository If you already ...
- VI/VIM 常用命令
VI/VIM 常用命令=========== 整理自鸟哥的私房菜 ---------- - 移动光标 命令 | 描述----------------------- ...
- 抓包工具Fidder详解(主要来抓取Android中app的请求)
今天闲着没吊事,来写一篇关于怎么抓取Android中的app数据包?工欲行其事,必先利其器,上网google了一下,发现了一款神器:Fiddler,这个貌似是所有软件开发者必备神器呀!这款工具不仅可以 ...
- python实现邮件发送完整代码(带附件发送方式)
实例一:利用SMTP与EMAIL实现邮件发送,带附件(完整代码) __author__ = 'Administrator'#coding=gb2312 from email.Header import ...
- Chapter 2 Open Book——18
"Wow," Mike said. "It's snowing."I looked at the little cotton fluffs that were ...
- 你所不知道的mybatis居然也有拦截器
对于mybatis的拦截器这个想法我来自于三个地方 也就是下面这个三个地方是可以使用的,其他的情况需要开发人员根据实际情况来使用. 1.对于分页的查询,我们可以对于分页的方法采用比较规范的命名,然后根 ...