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

来源：互联网发布：河南省保险数据编辑：程序博客网时间：2024/05/16 17:52

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 Documentwindow.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

阅读全文

2 0