나는 충돌하는 두 개의 루프를 가지고있다.

Question

나는 개발중인 사이트에서 두 가지 기능을 제어하는 ​​두 개의 루프를 가지고있다. 두 번째 루프는 두 번째 루프를 빠져 나와 중요한 기능을 잃게 만듭니다. 다음과 같이 두 개의 루프는 다음과 같습니다

// LOOP 1

function showHide(d) { 
    var onediv = document.getElementById(d); 
    var divs = ['content1', 'content2', 'content3', 'content4', 'content5', 'content6', 'content7', 'content8']; 
    for (var i = 0; i < divs.length; i++) { 
     if (onediv != document.getElementById(divs[i])) { 
      document.getElementById(divs[i]).style.display = 'none'; 
     } 
    } 
    onediv.style.display = 'block'; 
} 

// 2

function active(clickedLink) { 
    var links = document.getElementsByTagName('A'); 
    for (var i = 0; i < links.length; i++) { 
     links[i].className = '' 
    } 
    clickedLink.className = 'active'; 
} 

은 어쨌든, 본질적으로,이 두 루프는 몇 가지 숨겨진 DIV 년대와 그 표시 링크를 제어 LOOP divs.

하나의 루프는 show hide 루프로 클릭하거나 롤오버 할 때 div를 숨기고 다른 루프는 클릭 한 후 링크의 활성 상태를 유지하는 작은 루프입니다 (활성 div 링크에는 배경색)

문제는 제 레이아웃이 롤오버에 이상적이지 않아 문제를 해결 했으니까요. 이제는 클릭 (링크를 클릭하면 클릭 한 div가 표시됨) 기능이 작동하지 않습니다. 이 두 루프는 충돌해야합니다. 두 번째 루프 (함수 (활성) 하나)를 삭제하면 클릭 기능이 다시 작동되기 때문입니다. 당신은 어떤 아이디어가 있다면

<div id="left-side-links"> 

      <ul> 
       <li><a href="javascript:showHide('content1');" onclick="active(this); return false;" class="link" id="link1">Healthcare</a></li> 
       <li><a href="javascript:showHide('content2');" onclick="active(this); return false;" class="link" id="link2">Pharmaceutical Retail</a></li> 
       <li><a href="javascript:showHide('content3');" onclick="active(this); return false;" class="link" id="link3">Manufacturing</a></li> 
       <li><a href="javascript:showHide('content4');" onclick="active(this); return false;" class="link" id="link4">Hospitality</a></li> 
      </ul> 


      </div> 

      <div id="right-side-links"> 

      <ul> 
       <li><a href="javascript:showHide('content5');" onclick="active(this); return false;" class="link" id="link5">Entertainment</a></li> 
       <li><a href="javascript:showHide('content6');" onclick="active(this); return false;" class="link" id="link6">Financial Services</a></li> 
       <li><a href="javascript:showHide('content7');" onclick="active(this); return false;" class="link" id="link7">Oil, Gas & Energy</a></li> 
       <li><a href="javascript:showHide('content8');" onclick="active(this); return false;" class="link" id="link8">Education Government</a></li> 
      </ul> 

      </div> 

      <div id="clear"></div> 

      <div id="left-side-bottom"> 

       <img src="images/bottomright.png" alt="bottomright" width="" height=""/> 

      </div> 

     </div> 

     <div id="right-side"> 

      <div id="content1"><img src="images/cookie3.png" alt="cookie3" width="462" height=""/> 

       <p>Plus 6’s extensive video rental options have just the solution for you. When connected to our infrastructure, you will be linked to any standards based system worldwide. 
       system is easy. Test 1 </p> 
       <img src="images/Design1b.png" alt="Design1b" width="" height=""/> 

      </div> 

      <div id="content2"><img src="images/casinoimage5.png" alt="casinoimage5" width="462" height=""/> 

       <p>Plus 6’s extensive video rental options have just the solution for you. When connected to our infrastructure, you will be linked to any standards based system worldwide. 
       system is easy. Test 2 </p> 
       <img src="images/Design1b.png" alt="Design1b" width="" height=""/> 

      </div> 

      <div id="content3"><img src="images/FCF_Holidays.png" alt="FCF_Holidays" width="462" height=""/> 

       <p>Plus 6’s extensive video rental options have just the solution for you. When connected to our infrastructure, you will be linked to any standards based system worldwide. 
       system is easy. Test3 </p> 
       <img src="images/Design1b.png" alt="Design1b" width="" height=""/> 

      </div> 

      <div id="content4"><img src="images/mick21.png" alt="mick21" width="462" height=""/> 

       <p>Plus 6’s extensive video rental options have just the solution for you. When connected to our infrastructure, you will be linked to any standards based system worldwide. 
       system is easy. Test4 </p> 
       <img src="images/Design1b.png" alt="Design1b" width="" height=""/> 

      </div> 

      <div id="content5"><img src="images/cookie3.png" alt="cookie3" width="462" height=""/> 

       <p>Plus 6’s extensive video rental options have just the solution for you. When connected to our infrastructure, you will be linked to any standards based system worldwide. 
       system is easy. Test5 </p> 
       <img src="images/Design1b.png" alt="Design1b" width="" height=""/> 

      </div> 

      <div id="content6"><img src="images/casinoimage5.png" alt="casinoimage5" width="462" height=""/> 

       <p>Plus 6’s extensive video rental options have just the solution for you. When connected to our infrastructure, you will be linked to any standards based system worldwide. 
       system is easy. Test 6 </p> 
       <img src="images/Design1b.png" alt="Design1b" width="" height=""/> 

      </div> 

      <div id="content7"><img src="images/FCF_Holidays.png" alt="FCF_Holidays" width="462" height=""/> 

       <p>Plus 6’s extensive video rental options have just the solution for you. When connected to our infrastructure, you will be linked to any standards based system worldwide. 
       system is easy. Test 7 </p> 
       <img src="images/Design1b.png" alt="Design1b" width="" height=""/> 

      </div> 

      <div id="content8"><img src="images/mick21.png" alt="mick21" width="462" height=""/> 

       <p>Plus 6’s extensive video rental options have just the solution for you. When connected to our infrastructure, you will be linked to any standards based system worldwide. 
       system is easy. Test 8 </p> 
       <img src="images/Design1b.png" alt="Design1b" width="" height=""/> 

      </div> 

     </div> 

     </div> 

은 알려 주시기 바랍니다 :

여기 내 HTML입니다. 나는 그것이 바보 같고 쉬운 것이라고 확신한다. 그러나 나는 자바 스크립트에 익숙하지 않아서 그것을 찾기 위해 무엇을 검색해야할지조차 알지 못한다.

감사합니다. Mike Legacy

Answer 1

내 브라우저에서 코드를 실행 해 보았습니다.

<a href="javascript:showHide('content1');" onclick="active(this); return false; "class="link" id="link1">Healthcare</a> 

대신해야한다 :

<a href="javascript:void(0);" onclick="active(this); showHide('content1'); return false;" class="link" id="link1">Healthcare</a> 

각 링크에 대한와 똑같이 변경을 시도하십시오

난 당신이 다음과 같이 변경을해야한다고 생각합니다. 동시에 href 및 onclick 속성을 사용하는 것은 의미가 없습니다.