加了个DTD的头就不行了

<!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=gb2312"/>
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript" >
<!--
/*
function hideNav(idName)
{
    document.getElementById(idName).className = 'hide';
}
function showNav(idName)
{
    document.getElementById(idName).className = 'show';
}
*/
//-->
function showCurrentDiv(num)
{
    var divNum = document.getElementById('nav').getElementsByTagName('div');
for (var i=0;i<divNum.length ;i++ )
{   
    divNum[i].style.display = 'none';
}
    divNum[num].style.display = 'block';
}
</script>
<style type="text/css">
/*<![CDATA[*/
body{
margin: 0; padding: 0;
background: #fff ;
font-family: Verdana, Geneva, Arial; font-size: 12px; color:#000;
line-height: 12px;
} 
#navbar{
  background: #f6f6f6 ;
margin: 50px 0 0 0;  
width: 258px; height:30px; line-height:31px; color:#626262; 
}
#navbar a{
margin:0px 2px 0 5;
padding: 10px 8px 14px 8px;
color: #626262;
background: inherit;
text-decoration: none;
}
#navbar a:hover{
background-color: #33addb;
border-top:500px solid #000000;
color: #ffffff;
}
#nav{width: 258px; background-color: #33addb; height:25px; line-height: 25px; color: Maroon;}
#nav a{
margin: 0px 5px 0 5;
padding:0px 0px0px 0px;
color: #fff;
text-decoration: none;
}
#nav a:hover{ text-decoration: underline;}
.hide{display:none}
/*]]>*/
</style>
</head>
<body>
<center>
<div id="navbar">
<a href="#"onmouseover="showCurrentDiv(0)">1</a>
<a href="#"onmouseover="showCurrentDiv(1)">2</a>
<a href="#"onmouseover="showCurrentDiv(2)">3</a>
<a href="#"onmouseover="showCurrentDiv(3)">4</a>
<a href="#"onmouseover="showCurrentDiv(4)">5</a>
</div>
<div id="nav">
<div class="hide">
<a href="#">2</a>
<a href="#">2</a>
<a href="#"></a></div>
<div class="hide">
<a href="#">3</a>
<a href="#">3</a>
</div>
<div class="hide">
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a></div>
<div class="hide" >
<a href="#">0</a>
<a href="#">0</a>
</div>
</body>
</html>
PS：这个要怎么改才能显示我要的效果呢
http://bbs.blueidea.com/thread-2927600-1-1.html

解决方案 »

  1.   

    没看明白
    是不是这样
    <!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=gb2312"/>
    <title>无标题文档</title>
    <script language="JavaScript" type="text/javascript" >
    <!--
    /*
    function hideNav(idName)
    {
        document.getElementById(idName).className = 'hide';
    }
    function showNav(idName)
    {
        document.getElementById(idName).className = 'show';
    }
    */
    //-->
    function showCurrentDiv(num)
    {
        var divNum = document.getElementById('nav').getElementsByTagName('div');
    for (var i=0;i<divNum.length ;i++ )
    {   
        divNum[i].style.display = 'none';
    }
        divNum[num].style.display = 'block';
    }
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    body{
    margin: 0; padding: 0;
    background: #fff ;
    font-family: Verdana, Geneva, Arial; font-size: 12px; color:#000;
    line-height: 12px;
    } 
    #navbar{
      background: #f6f6f6 ;
    margin: 50px 0 0 0;  
    width: 258px; height:30px; line-height:31px; color:#626262; 
    }
    #navbar a{
    margin:0px 2px 0 5;
    padding: 10px 8px 14px 8px;
    color: #626262;
    background: inherit;
    text-decoration: none;
    }
    #navbar a:hover{
    background-color: #33addb;
    border-top:500px solid #000000;
    color: #ffffff;
    }
    #nav{width: 258px; background-color: #33addb; height:25px; line-height: 25px; color: Maroon;}
    #nav a{
    margin: 0px 5px 0 5;
    padding:0px 0px0px 0px;
    color: #fff;
    text-decoration: none;
    }
    #nav a:hover{ text-decoration: underline;}
    .hide{display:none}
    /*]]>*/
    </style>
    </head>
    <body>
    <center>
    <div id="navbar">
    <a href="#"onmouseover="showCurrentDiv(0)">1</a>
    <a href="#"onmouseover="showCurrentDiv(1)">2</a>
    <a href="#"onmouseover="showCurrentDiv(2)">3</a>
    <a href="#"onmouseover="showCurrentDiv(3)">4</a>
    <a href="#"onmouseover="showCurrentDiv(4)">5</a>
    </div>
    <div id="nav">
    <div class="hide">
    <a href="#">2</a>
    <a href="#">2</a>
    <a href="#"></a></div>
    <div class="hide">
    <a href="#">3</a>
    <a href="#">3</a>
    </div>
    <div class="hide">
    <a href="#">4</a>
    <a href="#">4</a>
    <a href="#">4</a>
    <a href="#">4</a>
    <a href="#">4</a></div>
    <div class="hide" >
    <a href="#">0</a>
    <a href="#">0</a>
    </div>
    <div class="hide" >
    <a href="#">6</a>
    <a href="#">6</a>
    </div>
    </body>
    </html>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    就是加了这个DTD的头以后显示的效果乱了，我不知道问题出在哪里，是不是上面整个代码里面还有其它问题啊，我希望有人能改一下，我上面贴的这个在IE8里显示有问题！