css部分
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
body{
background: #ddd;
}
.table-container{
400px;
height: 300px;
margin: 80px auto;
background: #fff;
}
.button-wrap{
display: flex;
justify-content: space-around;
height: 80px;
align-items: center;
font-size: 30px;
}
.button-wrap button{
flex:1;
font-size: 80px;
}
.button-wrap button.active{
background: yellowgreen;
}
.content-wrap{
height: 220px;
position: relative;
}
.content-wrap .content-box{
100%;
height: 100%;
font-size: 100px;
text-align: center;
line-height: 220px;
display: none;
}
.content-wrap .content-box.active{
display: block;
}
html和js部分<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>选项卡</title>
<link rel = "stylesheet" href = "css/normalize.css" />
<style type = "text/css">
.tab { 500px;margin: 50px auto;}
.tab-menu ul {height:30px;}
.tab-menu ul li {float:left;50px;height:30px;margin-right:3px;list-style:none;color:#000;border:solid 1px gray;border-bottom:none; text-align:center;line-height:30px;}
.tab-menu ul li.active {background-color: #007bc7;color: #fff;}
.tab-menu ul li:hover {cursor: pointer;}
.tab-box {height:150px;border:solid 1px gray;}
.tab-box div {display:none;}
.tab-box div.active {display:block;}
</style>
</head>
<body>
<div class = "tab">
<div class = "tab-menu class1">
<ul>
<li class = "active class4">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class = "tab-box class2">
<div class = "active">时事</div>
<div>体育</div>
<div>娱乐</div>
</div>
</div>
<script type = "text/javascript">
/*
*
*/
var tabList = document.getElementsByClassName( 'tab-menu' )[0].getElementsByTagName( 'li' );
var tabBox = document.getElementsByClassName( 'tab-box' )[0].getElementsByTagName( 'div' );
for( var i = 0;i<tabList.length;i++ ) {
tabList[i].onclick =function( num ) {
function foo() {
//隐藏其他选项卡的内容，切换到我们点击的这个
for( var i = 0; i<tabList.length; i++ ) {
removeClass( tabList[i],'active' );
removeClass( tabBox[i],'active' );
}
addClass( this,'active' );
addClass( tabBox[num],'active' );
}
return foo;
}(i);
}
/*去除某个特定的样式*/
function removeClass( obj, cN ) {
var strClassName = obj.className;
var arrClassName = strClassName.split(' ');
for( var i = 0; i < arrClassName.length; i++ ){
if(arrClassName[i] == cN) {
arrClassName.splice(i,1);
obj.className=arrClassName.join(' ');
break;
}
}
}
//增加某个特定的样式
function addClass( obj, cN ) {
var strClassName = obj.className;
var arrClassName = strClassName.split(' ');
for( var i = 0; i < arrClassName.length; i++ ){
if(arrClassName[i] == cN) {
break;
}
}
if( i == arrClassName.length ) {
obj.className = arrClassName.join(' ') + ' ' + cN;
}
}
</script>
</body>
</html>