demo1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
*{
margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
#tab-list{
width: 275px;
height:190px;
margin: 20px auto;
}
#ul1{
border-bottom: 2px solid #8B4513;
height: 32px;
}
#ul1 li{
display: inline-block;
width: 60px;
line-height: 30px;
text-align: center;
border: 1px solid #999;
border-bottom: none;
margin-left: 5px;}
#ul1 li:hover{
cursor: pointer;
}
#ul1 li.active{
border-top:2px solid #8B4513;
border-bottom:2px solid #FFFFFF;
}
#tab-list div{
border: 1px solid #7396B8;
border-top: none
}
#tab-list div li{
height: 30px;
line-height: 30px;
text-indent: 8px;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="tab-list">
<ul id="ul1">
<li class="active">热点新闻</li>
<li>合作播报</li>
<li>行业资讯</li>
</ul>
<div>
<ul>
<li><a href="javascript:;">码云笔记：欢庆“十一”送祝福</a></li>
<li><a href="javascript:;">看棋牌大亨如何颠覆快播江湖</a></li>
<li><a href="javascript:;">解密某宝合作内幕 分成竟高达</a></li>
<li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
</ul>
</div>
<div class="hide">
<ul>
<li><a href="javascript:;">收银妹代理棋牌游戏 成功晋级游戏女老板2</a></li>
<li><a href="javascript:;">收银妹代理棋牌游戏 成功晋级游戏女老板1</a></li>
<li><a href="javascript:;">IT精英放弃高薪只因想“玩”游戏</a></li>
<li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
</ul>
</div>
<div class="hide">
<ul>
<li><a href="javascript:;">紫金阁：代理棋牌游戏如何能稳赚不亏？</a></li>
<li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
<li><a href="javascript:;">都市娱乐赚钱首选 棋牌游戏代理</a></li>
<li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var oDiv = document.getElementById("tab-list");
var aDiv = oDiv.getElementsByTagName("div");
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
aDiv[this.index].className = "show";
}
}
}
</script>
</html>
demo2：和demo1逻辑略有不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab效果</title>
<style type="text/css">
ul{
list-style: none;
}
*{
padding: 0;
margin: 0;
}
#tab{
border: 1px solid #ccc;
margin: 20px auto;
width: 420px;
border-top: none;
}
.list ul{
overflow: hidden;
}
.list li{
float: left;
}
.list li{
padding-left: 28px;
padding-right: 28px;
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #CCCCCC;
background: -moz-linear-gradient(top,#fefefe,#ededed);
background: -webkit-gradient(linear,left top,left bottom,from(#FEFEFE),to(#EDEDED));
border-right: none;
cursor: pointer;
}
#listCon{
height: 100px;
}
#listCon div{
padding: 10px;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.list li:first-child{
border-left: none;
}
.list li:hover{
background: #87CEEB;
border-bottom: none;
}
.list li.cur{
background: #87CEEB;
border-bottom: none;
}
#listCon div.cur{
opacity: 1;
filter: alpha(opacity=100);
color: #fa4000;
}
</style>
</head>
<body>
<div id="tab">
<div class="list">
<ul>
<li class="cur">薛之谦</li>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</div>
<div id="listCon">
<div class="cur">演员、丑八怪、方圆之外</div>
<div>稻香、等你下课、听妈妈的话</div>
<div>江南、曹操、一千年以后</div>
<div>十年、浮夸、红色玫瑰</div>
</div>
</div>
</body>
<script>
window.onload = function(){
var oDiv = document.getElementById("tab");
var lis = oDiv.getElementsByTagName("li");
var oDivCon = document.getElementById("listCon");
var lisDiv = oDivCon.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
// 循环函数，i=0：默认从0开始；lis.length:函数总数组量；i++：函数循环向前加1
lis[i].index = i;
// 把i的值赋值给li==》index：索引值
lis[i].onclick = function(){
show(this.index);
}
}
function show(a){
for(var j=0;j<lis.length;j++){
lis[j].className = "";
// 清除其他li的样式
lisDiv[j].className = "";
}
lis[a].className = "cur";
// 调用class名用 classname调用
lisDiv[a].className = "cur";
}
}
</script>
</html>
demo3：这个是选项卡左右滑动效果，在商城的订单管理比较常见
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
border: 1px solid #ccc;
margin: 20px auto;
width: 199px;
}
input{
width: 46.2px;
height: 20px;
}
.box2{
width: 199px;
height: 199px;
overflow: hidden;
}
#listCon{
width: 2000px;
height: 199px;
transition: all 0.6s;
}
#listCon div{
width: 199px;
height: 199px;
background: #87CEEB;
text-align: center;
line-height: 200px;
overflow: hidden;
float: left;
}
</style>
</head>
<body>
<div id="box">
<div class="list">
<input type="button" class="active" value="最新" />
<input type="button" value="最热" />
<input type="button" value="最火" />
<input type="button" value="最牛" />
</div>
<div class="box2">
<div id="listCon">
<div><img src="../img/5c416c4a0fda2.jpg" width="100%" height="100%"></div>
<div><img src="../img/5c749f8f64d08.jpg" width="100%" height="100%"></div>
<div><img src="../img/5c749fe3f038c.jpg" width="100%" height="100%"></div>
<div><img src="../img/5c74a290b752c.jpg" width="100%" height="100%"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var oBox=document.getElementById('box');
var oBtn=oBox.getElementsByTagName('input');
var oDiv=document.getElementById('listCon');
var lisDiv=oDiv.getElementsByTagName('div');
for(var i=0;i<4;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
oDiv.style.marginLeft='-'+this.index*199+'px';
}
}
</script>
</html>
demo4: 改变背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="button" id="bianlv" value="变绿" onclick="show('green')"/>
<input type="button" id="bianhuang" value="变黄" onclick="show('yellow')"/>
<input type="button" id="bianhon" value="变红" onclick="show('red')"/><br>
<div id="box"></div>
</body>
<script type="text/javascript">
// function show1(){
// var oBox=document.getElementById('box');
// oBox.style.background='green';
// }
// function show2(){
// var oBox=document.getElementById('box');
// oBox.style.background='yellow';
// }
// function show3(){
// var oBox=document.getElementById('box');
// oBox.style.background='red';
// }
function show(color){
var oBox=document.getElementById('box');
oBox.style.background=color;
}
</script>
</html>
自己把demo里的图片路径替换就好