                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Tab选项卡切换效果

大侠给陌生人小弟一个机会!!!!!就是请问，跳转后页签出现了问题没有被隐藏，还有下边的div内第二个没有被现实一个出来然后还有一个没有显示出来，如果能运行一下帮我看看最好！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{padding:0;
margin:0;
}

#tabs{
width:290px;
padding:5px;
height:150px;
margin:20px;
}

#tabs ul{
list-style:none;
display:block;
height:30px;
line-height:30px;
border-bottom:2px solid red;
}
#tabs ul li{
background:#fff;
cursor:pointer;
float:left;
list-style:none;
height:28px;
line-height:28px;
margin:0px 3px;
border:1px solid #aaa;
border-bottom:none;
display:inline-block;
width:60px;
text-align:center;
}

#tabs ul li.on{
border-top:2px solid red;
border-bottom:2px solid #fff;
}

#tabs div {
height:120px;
line-height:25px;
border:1px solid #e0e0e0;
border-top:none;
padding:5px;
}
.hide{
display:none;
}
</style>
<body>
<div id="tabs">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>

<div class="">
275万购昌平邻铁三居总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府公园楼王现房
</div>

<div class="hide">
40平出租屋大改造美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆卫生间烟道的设计
</div>

<div class="hide">
通州豪华3居260万二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万苏州桥2居优惠价248万
</div>
</div>
<script>

window.onload = tab();
function tab(){

var index = 0; // index 代表高亮显示的索引页签
var time = null; //time是来设置定时器
var li = document.getElementsByTagName("li");
var div =document.getElementsByTagName("div");
//添加定时器，改变当前高亮的索引
time=setInterval(function(){
index++;
if(index>=li.length) {
index = 0;
for(var k =0; k<li.length;k++){
li[k].className="";
div[k].className="hide";
// alert("aaaa")
// console.log(li[k]);
}
}
li[index].className="on"; //找到页签，并为高亮赋值。
div[index].className="";

},2000)
}
</script>
</body>
</html>

蛋疼少年的和谐青春

2015-12-27

源自：Tab选项卡切换效果 3-1

关注问题我要回答

792

操作

收起

2 回答

李晓健回答被采纳 +3 积分
2015-12-27

<script>

    window.onload = tab();
    function tab(){

        var index = 0;      // index 代表高亮显示的索引页签
        var time = null;    //time是来设置定时器
        var tabs = document.getElementById('tabs');
        var li = document.getElementsByTagName("li");
        var div =tabs.getElementsByTagName("div");
        //添加定时器，改变当前高亮的索引
        time=setInterval(function(){
            index++;
            if(index>=li.length) {
                index = 0;
            }
            for(var k =0; k<li.length;k++){
                li[k].className="";
                div[k].className="hide";
            }
            li[index].className="on"; //找到页签 ，并为高亮赋值。
            div[index].className="";

        },2000)
    }
</script>