選項卡切換，效果不對,求指導(dǎo)，本人剛學(xué)的

JavaScript

檸檬小茶 2016-07-11 12:58:19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標(biāo)題文檔</title><script>window.onload=function(){?? ?var oTab=document.getElementById('tab');?? ?var oLi=oTab.getElementsByTagName('li');?? ?var oCon=document.getElementById('notice-con');?? ?var divs=oCon.getElementsByTagName('div');?? ?for(i=0;i<oLi.length;i++){?? ??? ?oLi[i].index=i;?? ??? ?oLi[i].onmouseover=function(){?? ??? ??? ?for(var j=0;j<oLi.length;j++){?? ??? ??? ??? ?oLi[j].className='';?? ??? ??? ??? ?divs[j].className='hide';?? ??? ??? ?}?? ??? ??? ?this.className='white';?? ??? ??? ?divs[this.index].className='show';?? ??? ??? ??? ??? ?}?? ?}}</script>? <link rel="stylesheet" type="text/css" href="reset.css"><style>@charset "utf-8";/* CSS Document */.hide{?? ?display:none;?? ?}.show{?? ?display:block;}.juli{?? ?line-height:30px;}.notice{?? ?width:300px;?? ?height:98px;?? ?margin:0 auto;?? ?margin-top:20px;?? ?border:1px solid #eee;?? ?overflow:hidden;}.tab{?? ?height:27px;?? ?position:relative;}.tab ul{?? ?position:absolute;?? ?width:310px;?? ?left:-1px;?? ?}.tab li{?? ?float:left;?? ?width:58px;?? ?height:26px;?? ?line-height:26px;?? ?text-align:center;?? ?background-color:#fff;?? ?background-color:#eee;?? ?padding:0 1px;;}.tab li a{?? ?text-decoration:none;?? ?color:black;}.tab li a:hover{?? ?color:#f90;}.tab li.white{?? ?background-color:#fff;?? ?border-bottom-color:#FFF;?? ?border-left:1px solid #eee;?? ?padding:0;}</style></head><div id="notice" class="notice">?? ???????? <ul id="tab" class="tab">??????????? <li class="white"><a href="#">公告</a></li>??????????? <li><a href="#">規(guī)則</a></li>??????????? <li><a href="#">論壇</a></li>??????????? <li><a href="#">安全</a></li>??????????? <li><a href="#">公益</a></li>??????? </ul>??? <div class="notice-con" id="notice-con">????????? <div class="content juli" id="content">??????????? <ul>??????????????? <li>個人重要信息要管姥個人重要信息要管姥</li>??????????????? <li>個人重要信息要管姥個人重要信息要管姥</li>??????????? </ul>????????? <div class="hide juli">??????????? <ul>??????????????? <li>2222222222222 22222222222</li>?????? ???????????????? <li>2222222222222 22222222222</li>?? ???????????? </ul>????????? </div>????????? <div class="hide juli">??????????? <ul>??????????????? <li>3333333333333 33333333333</li>?????? ???????????????? <li>3333333333333 33333333333</li>?? ???????????? </ul>????????? </div>?????????? <div class="hide juli">??????????? <ul>??????????????? <li>4444444444444 44444444444</li>?????? ???????????????? <li>4444444444444 44444444444</li>?? ???????????? </ul>???????? </div>?????????? <div class="hide juli">??????????? <ul>??????????????? <li>5555555555555 55555555555</li>?????? ???????????????? <li>5555555555555 55555555555</li>?? ???????????? </ul>???????? </div>??? </div></div><body></body></html>

查看完整描述

1 回答

已采納

玩意11

TA貢獻(xiàn)14條經(jīng)驗獲得超10個贊

<div class="content juli" id="content">
??????? <ul>
??????????? <li>個人重要信息要管姥個人重要信息要管姥</li>
??????????? <li>個人重要信息要管姥個人重要信息要管姥</li>
???????? </ul>
</div>

id="content"這個DIV，最后少了一個</div>

1 反對回復(fù) 2016-07-11