私は衝突している2つのループを持っています

Question

私は開発しているサイトで2つの機能を制御している2つのループを持っています。 2番目のループは2番目のループを空にして、私にいくつかの重要な機能を失わせてしまいます。次の2つのループは、以下のとおりです。

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

ワンループはshowHideループで、クリックまたはロールオーバーするとdivの表示と非表示が切り替わります。もう1つはクリックした後のリンクのアクティブな状態を維持するための小さなループです（アクティブなdivリンクには背景色）

問題は、私のレイアウトがロールオーバーには理想的ではなかったことです。さて、クリック（リンクをクリックすると、クリックされたdivが表示されます）機能が動作していません。 2つ目のループ（関数（アクティブ）1）を削除すると、クリック機能が再び機能するようになるため、これらの2つのループは衝突する必要があります。ここで

は私の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> 

各リンクのanalagous変更を行ってみてください。同時にhrefとonclickの属性を使用することは意味がありません。