Mám dve slučky, ktoré sa zrážajú - javascript, dom, loop

Mám dve slučky, ktoré ovládajú dva kusyfunkčnosti na stránke, ktorú vyvíjam. Druhá slučka vylučuje druhú a spôsobuje mi stratu niektorých životne dôležitých funkcií. Tieto dve slučky sú nasledujúce:

// 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";
}

V podstate tieto dve slučky ovládajú niektoré skryté divy a odkazy, ktoré tieto divy ukazujú.

Jedna slučka je slučka showHide, ktorá sa má samozrejme zobraziťa skryť divy, keď na ne kliknete alebo pretočíte, a druhá je malá slučka na udržanie aktívneho stavu odkazov po kliknutí (aktívny div bude mať farbu pozadia)

Problém je, že moje rozloženie nebolo ideálne preprevrátenie, takže som ich odstránil, nie je to v poriadku? Teraz nefunguje funkcia kliknutia (kliknite na odkaz a ukazuje div, na ktorý ste klikli). Tieto dve slučky musia byť v kolízii, pretože keď vymažem druhú slučku (funkcia (aktívna)), spustí sa funkcia kliknutia opäť pracuje.

Tu je môj 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/images/bottomright.png" alt="bottomright" width="" height=""/>

</div>

</div>

<div id="right-side">

<div id="content1"><img src="/images/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/images/Design1b.png" alt="Design1b" width="" height=""/>

</div>

<div id="content2"><img src="/images/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/images/Design1b.png" alt="Design1b" width="" height=""/>

</div>

<div id="content3"><img src="/images/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/images/Design1b.png" alt="Design1b" width="" height=""/>

</div>

<div id="content4"><img src="/images/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/images/Design1b.png" alt="Design1b" width="" height=""/>

</div>

<div id="content5"><img src="/images/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/images/Design1b.png" alt="Design1b" width="" height=""/>

</div>

<div id="content6"><img src="/images/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/images/Design1b.png" alt="Design1b" width="" height=""/>

</div>

<div id="content7"><img src="/images/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/images/Design1b.png" alt="Design1b" width="" height=""/>

</div>

<div id="content8"><img src="/images/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/images/Design1b.png" alt="Design1b" width="" height=""/>

</div>

</div>

</div>

Ak máte nejaké nápady, dajte mi vedieť. Som si istý, že je to niečo hlúpe a ľahké, ale v javascripte som nový, takže ani neviem, čo hľadať, aby som na to prišiel.

Vďaka! Mike Legacy

odpovede:

0 pre odpoveď č. 1

Skúsil som spustiť váš kód v prehliadači.

Myslím si, že musíte urobiť nasledujúcu zmenu:

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

by mali byť:

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

Skúste vykonať analagóznu zmenu pre každý odkaz. Nemá zmysel používať href a onclick atribúty súčasne.

---