亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

求助?。。。?!我寫的代碼,不知道怎么搞的,就是不成功,會出現點擊一下就出現一瞬間的現象,也不知道什么原因,各位大俠幫我看看,

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>tab切換 模仿</title>

<style type="text/css">

*{margin: 0;padding: 0;}

li{list-style: none;}

a{text-decoration: none;}

.wrapper{border: 1px solid #aaa;width: 250px;margin: 0 auto;position: relative;overflow: hidden;height: 100px;overflow: hidden;}

.tit{height: 30px;width: 258px;position: absolute;left: -1px;overflow: hidden;background-color: #eee;}

.tit a{display: block;line-height: 30px;background-color: #eee;

width: 50px;text-align: center;float: left;

color: #000;

margin-top: -1px;


border-bottom: 1px solid #aaa;

?}

.tit a:hover{background-color: #fff;color: orange;

border-left:1px solid #aaa;border-right:1px solid #aaa;

border-bottom: 1px solid #fff;}

.con{float: left;height: 70px;width: 250px; position: absolute;top:30px;}

.con .detail{display: none;float: left;padding: 10px;}

.con ul li{display: block;float: left;margin: 3px 7px;}

.show{display: block!important;}

</style>

</head>

<body>

<div>

<div id="tit">

<a href="">公告</a>

<a href="">規則</a>

<a href="">論壇</a>

<a href="">安全</a>

<a href="">公益</a>

</div>

<div id="con">

<ul ?class="detail">

<li>公告公告公告</li>

<li>公告公告公告</li>

<li>公告公告公告</li>

<li>公告公告公告</li>

</ul>


<ul ?class="detail ">

<li>規則規則規則</li>

<li>規則規則規則</li>

<li>規則規則規則</li>

<li>規則規則規則</li>

</ul>


<ul>

<li>論壇論壇論壇</li>

<li>論壇論壇論壇</li>

<li>論壇論壇論壇</li>

<li>論壇論壇論壇</li>

</ul>


<ul>

<li>安全安全安全</li>

<li>安全安全安全</li>

<li>安全安全安全</li>

<li>安全安全安全</li>

</ul>


<ul>

<li>公益公益公益</li>

<li>公益公益公益</li>

<li>公益公益公益</li>

<li>公益公益公益</li>

</ul>

</div>

</div>

</body>

</html>


<script type="text/javascript">

function $(id){

return document.getElementById(id);

}

var tits=$("tit").getElementsByTagName('a');

var cons=$("con").getElementsByTagName('ul');

// cons[1].className="detail show";

for (var i = 0; i < tits.length; i++) {

tits[i].onclick=function change(){

cons[0].className="detail show";

}

};


</script>


正在回答

1 回答

<!doctype html>


<html>


<head>


<meta charset="UTF-8">


<title>tab切換 模仿</title>


<style type="text/css">


*{margin: 0;padding: 0;}


li{list-style: none;}


a{text-decoration: none;}


.wrapper{border: 1px solid #aaa;width: 250px;margin: 0 auto;position: relative;overflow: hidden;height: 100px;overflow: hidden;}


.tit{height: 30px;width: 258px;position: absolute;left: -1px;overflow: hidden;background-color: #eee;}


.tit a{display: block;line-height: 30px;background-color: #eee;


width: 50px;text-align: center;float: left;


color: #000;


margin-top: -1px;




border-bottom: 1px solid #aaa;


?}


#tit a{cursor:pointer}

#tit a:hover{background-color: #fff;color: orange;


border-left:1px solid #aaa;border-right:1px solid #aaa;


border-bottom: 1px solid #fff;}


#con{float: left;height: 70px;width: 250px; position: absolute;top:30px;}


#con .detail{display: none;float: left;padding: 10px;}


#con ul li{display: block;float: left;margin: 3px 7px;}


.show{display: block!important;}


</style>


</head>


<body>


<div>


<div id="tit">


<a>公告</a>


<a>規則</a>


<a>論壇</a>


<a>安全</a>


<a>公益</a>


</div>


<div id="con">


<ul>


<li>公告公告公告</li>


<li>公告公告公告</li>


<li>公告公告公告</li>


<li>公告公告公告</li>


</ul>




<ul ?class="detail ">


<li>規則規則規則</li>


<li>規則規則規則</li>


<li>規則規則規則</li>


<li>規則規則規則</li>


</ul>




<ul class="detail">


<li>論壇論壇論壇</li>


<li>論壇論壇論壇</li>


<li>論壇論壇論壇</li>


<li>論壇論壇論壇</li>


</ul>




<ul class="detail">


<li>安全安全安全</li>


<li>安全安全安全</li>


<li>安全安全安全</li>


<li>安全安全安全</li>


</ul>




<ul class="detail">


<li>公益公益公益</li>


<li>公益公益公益</li>


<li>公益公益公益</li>


<li>公益公益公益</li>


</ul>


</div>


</div>


</body>


</html>




<script type="text/javascript">


function $(id){


return document.getElementById(id);


}


var tits=$("tit").getElementsByTagName('a');


var cons=$("con").getElementsByTagName('ul');


// cons[1].className="detail show";

for (var i = 0; i < tits.length; i++) {

var bindClick = function(i){

tits[i].onclick=function change(){

hideAll();

cons[i].className="detail show";

return false;

}

};

bindClick(i);

};

function hideAll(){

for (var i = 0; i < tits.length; i++) {

cons[i].className = "detail";

};

}




</script>

有三處錯誤:

1、樣式表中的tit和con選擇器書寫錯誤;

2、循環事件綁定的寫法拿到的值永遠都是i=5

3、默認第一個ul展示,其他的都為隱藏;另外在點擊第當前ul的時候需要把之前顯示的ul的display置為none

0 回復 有任何疑惑可以回復我~
#1

feibenren 提問者

非常感謝!
2015-04-20 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

求助!?。。。∥覍懙拇a,不知道怎么搞的,就是不成功,會出現點擊一下就出現一瞬間的現象,也不知道什么原因,各位大俠幫我看看,

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號