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选项卡制作的更多相关文章

  1. 原生tab选项卡

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  3. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  4. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

  5. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

  6. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  7. MUI框架-12-使用原生底部选项卡(凸出图标案例)

    MUI框架-12-使用原生底部选项卡(凸出图标案例) 今天,用 mui 做 app 时,遇到了可能各位都遇到过的头疼问题:底部中间图标凸起,如下图: 最后有源代码 [提示]:有人问我在 HBuilde ...

  8. 基于CkEditor实现.net在线开发之路(4)快速布局,工具箱,模板载入,tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  9. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

随机推荐

  1. abap异常处理 , update module

    1:异常 https://www.cnblogs.com/rainysblog/p/6665455.html 2:update module https://www.cnblogs.com/cindy ...

  2. try finally 处理方式

    这样的处理方式:主要解决当资源建立连接后,出现问题,需要关闭资源.                           异常无法直接catch处理,但是资源需要关闭

  3. [LeetCode] 559. Maximum Depth of N-ary Tree_Easy tag: DFS

    Given a n-ary tree, find its maximum depth. The maximum depth is the number of nodes along the longe ...

  4. pyqt常用窗口组件

    扩展知识: 熟悉常用的窗口组件: 1 按钮类 QPushButton   普通按钮 QToolButton   工具按钮:通常在工具栏使用 QRadioButton   单选框 QCheckBox   ...

  5. grunt的用法一

    grunt也是工程化管理工具之一 首先你需要全局安装grunt,打开cmd命令 cnpm install -g grunt-cli 然后在你项目目录下执行 cnpm install --save gr ...

  6. Hive自定义函数UDF和UDTF

    UDF(user defined functions) 用于处理单行数据,并生成单个数据行. PS: l 一个普通UDF必须继承自“org.apache.hadoop.hive.ql.exec.UDF ...

  7. UVAL 3942 Remember the Word(递推+Trie)

    Remember the Word [题目链接]Remember the Word [题目类型]递推+Trie &题解: 蓝书P209,参考的别人公开代码 &代码: #include ...

  8. Monogdb 按2个字段值之间的比较

    使用 $where BsonDocument query = new BsonDocument("$where", "this.soDate<this.pEffDa ...

  9. tp命名空间

    namespace   Home\Controller;  命名空间   根命名空间下的类所在的文件夹use Think\Controller; 使用   根命名空间下的controller类 顶头写 ...

  10. centos下jdk、jre安装

    1.在/usr/目录下创建java目录 [root@localhost ~]# mkdir/usr/java [root@localhost ~]# cd /usr/java 2.下载jdk,然后解压 ...