原生tab选项卡制作
html部分
<div class="tab">
<div class="nav">
<ul>
<li class="active">选项1<i></i></li>
<li>选项2<i></i></li>
<li>选项3<i></i></li>
</ul>
</div>
<div class="content">
<div class="box" >我是第一个</div>
<div class="box none">我是第二个</div>
<div class="box none">我是第三个</div>
</div>
</div>
css部分
<style type="text/css">
ul,
ul li{
list-style: none;
margin:0 ;
padding:0 ;
}
.nav:after{
clear: both;
display: block;
content: " ";
visibility: hidden;
}
.nav ul li{
float: left;
width:100px ;
text-align: center;
height: 40px;
line-height:40px ;
background:#2378E1 ;
color: #fff;
position: relative;
}
.box{
width:300px ;
height: 100px;
background:#27AE60 ;
}
.nav ul li.active i{
display: inline-block;
width:0 ;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom:10px solid #F7F7F7 ;
position:absolute;
left:40px ;
bottom: 0;
}
.active{
background:#F39800 !important;
}
.none{
display: none;
}
.block{
display: block;
}
</style>
js部分
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementsByClassName('nav')[0].getElementsByTagName('li');
var box=document.getElementsByClassName('box');
for(var i=0;i<btn.length;i++){ //循环绑定点击事件
btn[i].index=i; //第几个下标被点击
btn[i].onclick=function(){
for(var i=0;i<btn.length;i++){//先制空
btn[i].className='';
box[i].style.display='none';
}
this.className='active';
box[this.index].style.display='block';
}
}
}
</script>
原生tab选项卡制作的更多相关文章
- 原生tab选项卡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 微信小程序swiper制作内容高度不定的tab选项卡
微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...
- tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
- react tab选项卡切换
Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
- MUI框架-12-使用原生底部选项卡(凸出图标案例)
MUI框架-12-使用原生底部选项卡(凸出图标案例) 今天,用 mui 做 app 时,遇到了可能各位都遇到过的头疼问题:底部中间图标凸起,如下图: 最后有源代码 [提示]:有人问我在 HBuilde ...
- 基于CkEditor实现.net在线开发之路(4)快速布局,工具箱,模板载入,tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
随机推荐
- pip升级时报错--- No module named 'pip._internal'
一.问题: 之前python3.6是安装的pip版本为:pip=9.0.1,我按照提示升级报错,一直装不上pip18.0,于是直接在site-package目录下删掉了pi ...
- H5-FileReader实现图片预览&Ajax上传文件
图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jquery-ui 之dialog
1,引入css和js <script type="text/javascript" src="${ctx}/js/ytd/platform/zdjsDlbyqbh/ ...
- squid 快速配置
安装 yum install squid -y yum install httpd-tools -y 基本认证配置文件 #网络 http_port dns_nameservers 100.100.2. ...
- 【Redis】事务
在Redis中,事务是以multi/exec/discard进行的, 其中multi表示事务的开始, exec表示事务的执行,discard表示丢弃事务. > multi # 事务的开始 OK ...
- js贪心算法---钱币找零问题
function MinCoinChange(coins){ var coins = coins.sort(function(a,b){ return b - a; }); this.makeChan ...
- 20165321预备作业3:Linux安装及命令入门
Linux安装 在老师给的VirtualBox的网站上面,我下载了VirtualBox的最新版本,安装成功后,我又下载了Ubuntu.但是,发现无论是哪个版本的Ubuntu都无法在VirtualBox ...
- Mysql删除重复记录,保留id最小的一条
mysql 查询重复字段,及删除重复记录的方法MySQL, 数据库, 数据库, 字段, 服务器数据库中有个大表,需要查找其中的名字有重复的记录id,以便比较.如果仅仅是查找数据库中name不重复的字段 ...
- python SMTP other
HTML 正文,带链接和图片 //test.py import smtplib from email.mime.image import MIMEImage from email.mime.text ...
- android studio 编译sdk版降低报错解决方法
解决办法如下: 步骤1:在gradle中修改 compile sdk 版本,比如 8. 步骤2:在gradle中删除v7包的依赖 步骤3:在manifest中修改theme,supportsRtl.t ...