html+css+js实现选项卡切换

最新推荐文章于 2024-05-06 21:05:10 发布

Cc_JoJo

最新推荐文章于 2024-05-06 21:05:10 发布

阅读量7.6k

点赞数 11

分类专栏： web前端文章标签： html javascript css

本文链接：https://blog.csdn.net/caohoucheng/article/details/72644980

版权

web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

html+css+js选项卡

原理：先把所有的隐藏，再把当前的显示出来

效果如下：

这里写图片描述

一、Html页面布局

Html页面布局由三个按钮（input）和三个div组成，三个按钮中总有一个当前按钮（高亮），三个div放内容，三个div都是隐藏只有一个显示；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<link href="Untitled-3.css" type="text/css"  rel="stylesheet"/>
<script src="Untitled-2.js" type="text/javascript"></script>
</head>

<body>
<div class="box" id="div1">
  <input type="button" class="active"  value="1" index="0"/>
  <input type="button" value="2" index="1"/>
  <input type="button" value="3" index="2" />
   <div class="content"  style="display:block"  >内容1</div>
  <div class="content"  >内容2</div>
  <div class="content"   >内容3</div>
</div>
</div>
</body>
</html>

二、css样式

@charset "utf-8";
/* CSS Document */

.box {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    background-color: #ccc;
    padding: 10px
}
.box input {
    margin:0px;

    float: left;
    width: 100px;
    text-align: center;
    padding: 10px
}
.active {
    background: #CF0;
}
.content {
    display:none;
    text-align: center;
    line-height: 300px;
    height: 300px;
    weight: 300px;
    background: yellow;
}

三、JavaScript实现选项卡切换

// JavaScript Document
window.onload=function(){
    var oDiv=document.getElementById('div1');
    var aBtn=oDiv.getElementsByTagName('input');
    var aDiv=oDiv.getElementsByTagName('div');

    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].onclick=function(){
            for(var i=0;i<aBtn.length;i++){
                aBtn[i].className='';
                aDiv[i].style.display='none';   
                }
            this.className='active';
            aDiv[this.index].style.display='block';
            };
        }

};

源码地址https://github.com/caohoucheng/Tab_Control

Cc_JoJo

关注

11
点赞
踩
50

收藏

觉得还不错? 一键收藏
0
评论
html+css+js实现选项卡切换

html+css+js选项卡效果如下：一、Html页面布局Html页面布局由三个按钮（input）和三个div组成，三个按钮中总有一个当前按钮（高亮），三个div放内容，三个div都是隐藏只有一个显示；<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
复制链接

扫一扫