我有兩個衝突的循環

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'; 
} 

// LOOP 2

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

不管怎麼說，本質上，這兩個迴路控制一些隱藏的div和顯示這些鏈接div的。

一個循環是showHide循環，當點擊或翻轉時明顯顯示和隱藏div，另一個循環用於保持點擊之後鏈接的活動狀態（活動div鏈接將具有背景顏色）

問題是我的佈局對於翻滾並不理想，所以我刪除了它們，沒有什麼大不了的？那麼現在點擊（點擊一個鏈接，它顯示了被點擊的div）功能不起作用。這兩個循環必須發生衝突，因爲當我刪除第二個循環（功能（活動）循環）時，點擊功能再次開始工作。

這裏是我的HTML：

<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> 

如果您有任何意見，請讓我知道。我敢肯定，這是愚蠢和容易的，但我是JavaScript的新手，所以我甚至不知道要搜索什麼來弄清楚。

謝謝！ 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屬性沒有任何意義。