大神。幫我看看為什么運行不了,點一下全沒了
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */?
? ? ?*{padding:0;margin:0;font-size:12px;}
? ? ?li{list-style:none;}
? ? ?#box{width:290px;padding:5px;height:150px;}
? ? ?#box ul{width:100%;height:30px;line-height:30px;border-bottom:1px solid #ccc;}
? ? ?#box li{width:33.3%;float:left;text-align:center;}??
? ? ?.active{
? ? ? ? ?
? ? ? ? ?border-bottom:1px solid #fff;
? ? ?}
? ? ?.show{
? ? ? ? ?display:block;
? ? ?}
? ? ?.hidden{
? ? ? display: none;
? ? ?}
? ? ??
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?
? ? // JS實現(xiàn)選項卡切換
? ? window.onload = function(){
? ? ?var Ul1=document.getElementById('ul');
? ? ? ? var lis = document.getElementsByTagName('li');
? ? ? ? var divs = document.getElementsByTagName('div');
? ? ? ? for(var i = 0;i<lis.length;i++){
? ? ? ? ? ? lis[i].index = i;
? ? ? ? ? ? lis[i].onclick = function(){
? ? ? ? ? ? ? ? for(var i= 0;i<lis.length;i++){
? ? ? ? ? ? ? ? ? ? lis[i].className='';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ?this.className='active';
? ? ? ? ? ? ?for(var j = 0;j<divs.length;j++){
? ? ? ? ? ? ?divs[j].className='hidden';
? ? ? ? ? ? ?}
? ? ? ? ? ? ?divs[this.index].className='show';
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="box">
? ? <ul id="ul">
? ? ? ? <li class="active">房產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>
? ? ? ? 275萬購昌平鄰鐵三居 總價20萬買一居<br/>
? ? ? ? 200萬內購五環(huán)三居 140萬安家東三環(huán)<br/>
? ? ? ? ? ?北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br/>
? ? ? ? ? ?京樓盤直降5000 中信府 公園樓王現(xiàn)房<br/>
? ? </div>
? ? <div class="hidden">
? ? ? ? 40平出租屋大改造 美少女的混搭小窩<br/>
? ? ? ? ?經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br/>
? ? ? ? ?新中式的酷色溫情 66平撞色活潑家居<br/>
? ? ? ? ?瓷磚就像選好老婆 衛(wèi)生間煙道的設計<br/>
? ? </div>
? ? <div class="hidden">
? ? ? ? 275萬購昌平鄰鐵三居 總價20萬買一居<br/>
? ? ? ? 200萬內購五環(huán)三居 140萬安家東三環(huán)<br/>
? ? ? ? 北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br/>
? ? ? ? 京樓盤直降5000 中信府 公園樓王現(xiàn)房<br/>
? ? </div>
</div>
?
</body>
</html>
2018-12-07
根據(jù)老夫多年來經(jīng)驗,隨便眼睛一瞟就發(fā)現(xiàn)了2處問題。。
第一?var lis = document.getElementsByTagName('li'); ?你的這個取值不嚴謹。。
需要改成var lis=Ul1.getElementsByTagName('li');表示ul這個標簽下面所有l(wèi)i標簽;
第二就是因為你取值不嚴謹才導致的什么東西全不見了的問題。。
你上面這樣寫var divs = document.getElementsByTagName('div');
你下面循環(huán)的時候?divs[j].className='hidden';給頁面所有div都加隱藏,你一點擊肯定隱藏啊。。想想看你外層是不是還一個最大的div包著。。你把這個div刪了。。我保證你代碼可以跑。。