У меня есть две петли, которые сталкиваются - PullRequest
0 голосов
/ 04 января 2012

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

// 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)будет иметь цвет фона)

Проблема в том, что мой макет не был идеальным для ролловеров, поэтому я удалил их, не так уж и сложно?Что ж, теперь функция click (щелкнуть ссылку, и она показывает 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, поэтому я даже не знаю, что искать, чтобы понять это.

Спасибо!Майк Легаси

1 Ответ

0 голосов
/ 04 января 2012

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

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

<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 одновременно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...