У меня две циклы, которые сталкиваются

У меня две циклы, которые контролируют две части функциональности на сайте, который я разрабатываю. Второй цикл отменяет второй и заставляет меня потерять некоторые жизненно важные функции. Две циклы следующие:

//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;" id="link1" target="_blank">Healthcare</a></li>
 <li><a href="javascript:showHide('content2');" onclick="active(this); return false;" id="link2" target="_blank">Pharmaceutical Retail</a></li>
 <li><a href="javascript:showHide('content3');" onclick="active(this); return false;" id="link3" target="_blank">Manufacturing</a></li>
 <li><a href="javascript:showHide('content4');" onclick="active(this); return false;" id="link4" target="_blank">Hospitality</a></li>
 </ul>


 </div>

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

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

 </div>

 

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

 

 </div>

 

 <div id="right-side"> 

 <div id="content1">

 <p>Plus 6s 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>
 

 </div>

 <div id="content2">

 <p>Plus 6s 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>
 

 </div>

 <div id="content3">

 <p>Plus 6s 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>
 

 </div>

 <div id="content4">

 <p>Plus 6s 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>
 

 </div>

 <div id="content5">

 <p>Plus 6s 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>
 

 </div>

 <div id="content6">

 <p>Plus 6s 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>
 

 </div>

 <div id="content7">

 <p>Plus 6s 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>
 

 </div>

 <div id="content8">

 <p>Plus 6s 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>
 

 </div>

 </div>

Если у вас есть идеи, сообщите мне. Я уверен, что это что-то глупое и легкое, но я новичок в javascript, поэтому я даже не знаю, что искать, чтобы понять это.

Благодарю! Майк Наследие

1 ответ

Я попытался запустить ваш код в своем браузере.

Я думаю, что вам нужно внести следующие изменения:

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

должен быть:

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

Попробуйте сделать аналоговое изменение для каждой ссылки. Не имеет смысла использовать атрибуты href и onclick одновременно.

licensed under cc by-sa 3.0 with attribution.