两个JS出现冲突 我找了好久都没改好，我不太会JS，求教高手帮忙啊我急用

<!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>
<title></title>
<meta http-equiv="content-type" content="text/xml;charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;font-size:13px;line-height:1.5;}
body{padding:20px;}
 .cur{color:#f60;border-bottom:1px solid #fff;font-weight:bold;background:#fff;cursor:default;}
 #tab_,dl{position:relative;float:left;height:100px;width:300px;}
 h4,dt{float:left;height:20px;margin:0 0 0 8px;display:inline;line-height:20px;width:60px;border:1px solid #ccc;position:relative;z-index:11;text-align:center;font-weight:normal;cursor:pointer;background:#eee;}
 .c,dd{position:absolute;top:21px;border:1px solid #ccc;left:0;width:250px;padding:20px;overflow:hidden;display:block;}
 #tab_{clear:left;}
 h1{clear:left;padding:10px 0}
 #tab_1.cur{color:#f60}
 #tab_2.cur{color:blue}
 #tab_3.cur{color:green}
 ul,li{list-style:none; margin:0; padding:0;}
 a{text-decoration:none; color:#333;}
 
 
 #nav{
     width:900px; height:30px;
     margin:0 auto; padding:0; background-color:#0FF;
 }
 #nav li{
     width:100px; height:30px; line-height:30px;
     float:left; background-color:#ccc; text-align:center;
     position:relative; cursor:pointer;
 }
 #nav li a{
     background-color:#96F;
     width:100px; height:30px; line-height:30px; display:block;
 }
 #nav .active{background-color:#309; color:#FFF;}
 .box{width:100px; padding:0; margin:0; position:absolute; top:30px; left:0; overflow:hidden; background-color:#000; height:0;}
 </style>
</head>
<body>
 <ul id="nav">
     <li>11111
         <div class="box">
 
             <a href="#">11111111111</a>
             <a href="#">11111111111</a>
             <a href="#">11111111111</a>
             <a href="#">11111111111</a>
             <a href="#">11111111111</a>
             <a href="#">11111111111</a>
 
             <a href="#">11111111111</a>
         </div>
     </li>
     <li>22222
         <div class="box">
             <a href="#">22222222222</a>
             <a href="#">22222222222</a>
             <a href="#">22222222222</a>
 
             <a href="#">22222222222</a>
         </div>
         </li>
     <li>33333
         <div class="box">
             <a href="#">33333333333</a>
             <a href="#">33333333333</a>
             <a href="#">333333333333</a>
 
             <a href="#">22222222222</a>
         </div>
     </li>
     <li>44444
         <div class="box">
             <a href="#">444444444</a>
             <a href="#">444444444</a>
             <a href="#">44444444</a>
 
             <a href="#">44444444</a>
         </div>    
     </li>
     <li>55555
         <div class="box">
             <a href="#">5555555555</a>
             <a href="#">555555555</a>
             <a href="#">5555555555</a>
 
             <a href="#">5555555555</a>
         </div>
     </li>
     <li>66666
         <div class="box">
             <a href="#">6666666666</a>
             <a href="#">66666666666</a>
             <a href="#">66666666666</a>
 
             <a href="#">66666666666</a>
         </div>
     </li>
 </ul>
<h1>mouseover</h1>
<dl id="tab">
 <dt>美国</dt>
 <dd>我都不怕</dd>
 <dt>朝鲜</dt>
 <dd>谁都怕我</dd>
 <dt>某国</dt>
 <dd>我谁都怕</dd>
</dl>
<h1>mouseover</h1>
<dl id="tabX">
 <dt>美国</dt>
 <dd>我都不怕</dd>
 <dt>朝鲜</dt>
 <dd>谁都怕我</dd>
 <dt>某国</dt>
 <dd>我谁都怕</dd>
</dl><script type="text/javascript">
function id(elem) {return document.getElementById(elem)}
function show(elem) {elem.style.display = "";}
function hide(elem) {elem.style.display = "none";}
function next( elem ) {
    do {
        elem = elem.nextSibling;
    } while ( elem && elem.nodeType != 1 );
    return elem;
}
function tab(a, p) {
 
 var p = (p === undefined) ? {e:"onclick",n:1} : p,
  node = id(a).firstChild,
  x = [];
 p.e = (p.e === undefined) ? "onclick" : p.e;
 p.n = (p.n === undefined) ? 1 : p.n;
 node=(node.nodeType !== 1)?next(node):node;
 for (var i = 1, node; node; i++, node = next(node)) {
  x[i] = node;
 }
 for (var i = 1; x[i]; i++) {
  if(i % 2 == 0){hide(x[i]);x[i-1].id=a+(i/2)}
     x[p.n*2-1].className = "cur";
  show(x[p.n*2]);
  temp = function (i) {
   if (i % 2 == 1) {
    x[i][p.e] = function () {
     for (var j = 1; x[j]; j++) {
      if (j % 2 == 0) {
       hide(x[j]);
       x[j-1].className = ""
      }
     }
     show(x[i+1]);
     x[i].className = "cur"
    }
   } else {
    return null
   }
  }(i)
 }
}
tab("tab",{e:"onmouseover",n:2});
tab("tabX",{e:"onmouseover",n:2});
tab("tab_")
</script> <script type="text/javascript">
 window.onload    =    function ()
 {
     var        oNav    =    document.getElementById("nav");
     var        oLi        =    oNav.getElementsByTagName("li");
     var        i        =    0;
     
             for(i=0;i<oLi.length;i++)
             {
                 oLi[i].onmouseover    =    function ()
                 {
                     var        oHeight    =    this.getElementsByTagName("div")[0].scrollHeight;
                     
                     this.className    =    "active";
                     
                     show(this,oHeight);
                 };
                 oLi[i].onmouseout    =    function ()
                 {
                     this.className    =    " ";
                     show(this,0);
                 };
             };
 };
 function show(obj,n)
 {
     var        oDiv    =    obj.getElementsByTagName("div")[0];
     var        aA        =    obj.getElementsByTagName("");
                     
             clearInterval(obj.timer);
             obj.timer    =    setInterval(function (){
                 if(n    ==    oDiv.offsetHeight)
                 {
                     clearInterval(obj.timer);
                     obj.timer    =    null;
                 }
                 else
                 {
                     var        iHeight    =    (n    -    oDiv.offsetHeight)    /    10;
                     
                             iHeight    =    iHeight>0?Math.ceil(iHeight):Math.floor(iHeight);
                     
                             oDiv.style.height    =    (oDiv.offsetHeight    +    iHeight)    +    "px";
                 }
                 },5);<!--修改数字改变下拉速度-->
 }
</script>
</body>
</html>请看以上代码，第一个JS和第二个JS会相互影响，而且哪个在前哪个在后会出现不同的影响。现在这种情况下，导航菜单能有下拉，但是TAB选项卡里面的内容就会没有了 如果两个JS调换先后顺序，导航就不能出现下拉菜单了。 求教高手 我是真搞不定了....

解决方案 »

  1.   

    你自己定义了两个同名的show函数将function show(obj,n)这个show改个名字。比如:showtab
    然后window.onload里面的show(this,oHeight);show(this,0);
    全部改为：
    showtab(this,oHeight);showtab(this,0);
      

  2.   

    楼主我想说的是js里面第一不要用同名方法，第二也是你这里的问题所在，就是方法名不要取js或jquery内部封装的函数名，比如你的方法名有什么hide show id这种，这在开发中都是不被允许的，而且会发生错误