js浏览器兼容问题。八百里加急！

chengliwangtao 2011-01-12 12:43:03

我做了一个js 导航
理想效果双层导航。
在浏览器中浏览时成了乱七八糟的东西
请高手指教一下那些需要修改。

function iniPage()

{

 var barCTT=document.getElementById("dNavBar")

 var liArr=barCTT.getElementsByTagName("li")



 var links=new Array()

 links[0]="<a style='margin-left:50px;text-align:left;' href='user/Miniindex.aspx' >网站首页</a>"

 links[1]="<a style='margin-left:50px;' href='user/mood.aspx' target='LeftForm'>语录</a>  <a href='Usercontrol/send.aspx'>留言</a>  "

 links[2]="<a style='margin-left:50px;' href='user/lgowr.aspx'>日记</a>  <a href='user/logtwo.aspx'>情侣日记</a>  <a href='user/shouchang.aspx'>收藏日记</a> <a href='user/addlog.aspx'>发表日志</a>"

 links[3]="<a style='margin-left:50px;' href='http:///?cat=3'>您自定义</a>  <a href='http:///?cat=2'>您自定义</a>  <a href='http:///?cat=2'>您自定义</a>"  

 links[4]="<a style='margin-left:50px;' href='http:///?cat=1'>您自定义</a>  <a href='http:///?cat=1'>您自定义</a>"



 for (i=0;i<liArr.length;i++)

 {

  liArr[i].onclick=function()

  {

   selectThis(this,liArr,links)

  }

 }

}

function selectThis(indexObj,allLi,infoArr)

{

 var index=0;

 for (i=0;i<allLi.length;i++)

 {



  allLi[i].style.backgroundColor="#F74461";

  allLi[i].style.height="28px";

  if (indexObj==allLi[i])

  {

   index=i;

  }

 }

 indexObj.style.borderBottom="0px solid #666688";

 indexObj.style.backgroundColor="#666688";

 indexObj.style.height="28px";



 document.getElementById("subMenu").innerHTML=infoArr[index];

}

<!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 runat="server">

    <title>无标题页</title>

</head>

<link href="css/index.css" rel="stylesheet" type="text/css" />

<script src="js/sitpindex.js" type="text/javascript"></script>



<body onLoad="iniPage()">



    <form id="form1" runat="server" method="post">



    

    <div class="win">



 <div id="dNavBar"><li>首页</li><li>MINE</li><li>日记本</li><li>随便逛逛</li><li>商量</li>

</div>

<div id="subMenu">





</div>

<br />



<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div> 

<div class="didi" style="text-align:center; width:100%;margin:0 auto; font-size:12px;">

<a href="#">网站宗旨</a>||<a href="#">关于我们</a>||<a href="#">开发团队</a>||<a href="#">联系我们</a>

</div>

    </form>

</body>

</html>

...全文

135 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

碧海情天-赵亮 2011-01-12

打赏
举报

liArr[i].onmouseover=function()

一般都是鼠标划过即变。点击不直接。

86y 2011-01-12

打赏
举报

帮你看了下。是CSS问题!



<!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 runat="server">

<title>无标题页</title>

<script language="javascript" type="text/javascript">

function iniPage()

{

 var barCTT=document.getElementById("dNavBar")

 var liArr=barCTT.getElementsByTagName("li")



 var links=new Array()

 links[0]="<a style='margin-left:50px;text-align:left;' href='user/Miniindex.aspx' >网站首页</a>"

 links[1]="<a style='margin-left:50px;' href='user/mood.aspx' target='LeftForm'>语录</a>  <a href='Usercontrol/send.aspx'>留言</a>  "

 links[2]="<a style='margin-left:50px;' href='user/lgowr.aspx'>日记</a>  <a href='user/logtwo.aspx'>情侣日记</a>  <a href='user/shouchang.aspx'>收藏日记</a> <a href='user/addlog.aspx'>发表日志</a>"

 links[3]="<a style='margin-left:50px;' href='http:///?cat=3'>您自定义</a>  <a href='http:///?cat=2'>您自定义</a>  <a href='http:///?cat=2'>您自定义</a>"  

 links[4]="<a style='margin-left:50px;' href='http:///?cat=1'>您自定义</a>  <a href='http:///?cat=1'>您自定义</a>"



 for (i=0;i<liArr.length;i++)

 {

  liArr[i].onclick=function()

  {

   selectThis(this,liArr,links)

  }

 }

}

function selectThis(indexObj,allLi,infoArr)

{

 var index=0;

 for (i=0;i<allLi.length;i++)

 {



  allLi[i].style.backgroundColor="#F74461";

  allLi[i].style.height="35px";

  if (indexObj==allLi[i])

  {

   index=i;

  }

 }

 indexObj.style.borderBottom="0px solid #666688";

 indexObj.style.backgroundColor="#666688";

 indexObj.style.height="35px";



 document.getElementById("subMenu").innerHTML=infoArr[index];

}



</script>

<style>

*{margin:0;padding:0;}

.clearfix:after 

{ content:"."; display:block;height:0;clear:both; visibility:hidden;} 

*html .clearfix{height:1%;}

*+html .clearfix{height:1%;}

.clearfix{display:inline-block;} 

/* Hide from IE Mac */ 

.clearfix {display:block;} 



#dNavBar{background-color:#F74461;width:950px;height:35px;}

#lgo{width:20%;height:150px;background-color:#8D8EA2;}

#dNavBar li{list-style:none;float:left;display:inline;width:85px;height:35px;line-height:35px;font-size:14px;color:#fff;background-color:#F74461;text-align:center;cursor:pointer;}

#subMenu{background-color:#666688;width:950px;text-align:left;height:35px;line-height:35px;color:#FFFFFF;font-size:14px;}

.win{height:70px;overflow:hidden;}

</style>

</head>

<body onLoad="iniPage()">

<form id="form1"  method="post">

  <div class="win">

    <ul id="dNavBar" class="clearfix">

      <li>首页</li>

      <li>MINE</li>

      <li>日记本</li>

      <li>随便逛逛</li>

      <li>商量</li>

    </ul>

    <div id="subMenu"> </div>

  </div>

  <div class="didi" style="text-align:center; width:100%;margin:0 auto; font-size:12px;"> <a href="#">网站宗旨</a>||<a href="#">关于我们</a>||<a href="#">开发团队</a>||<a href="#">联系我们</a> </div>

</form>

</body>

</html>

hp2008001 2011-01-12

打赏
举报

CSS里面 #dNavBar{margin-top:50px;
}和
#subMenu{height:35px}删掉试试是不是要这个效果

chengliwangtao 2011-01-12

打赏
举报

#dNavBar{

background-color:#F74461;

width:950px;

float:left;	

margin-top:50px;

}

#lgo

{

float:left;	

width:20%;

height:150px;

background-color:#8D8EA2;	

}

#dNavBar li{

list-style-type:none;

float:left;

width:85px;

height:35px;

line-height:35px;

font-size:14px;

color:#FFFFFF;

background-color:#F74461;

text-align:center;

display:block;

cursor:pointer;

}

#subMenu{

background-color:#666688;

width:950px;

text-align:left;

border-right:3px solid #ffffff;

height:35px;

line-height:35px;

color:#FFFFFF;

font-size:14px;

}