我有兩個沖突的循環

Question

我有兩個循環來控制我正在開發的站點上的兩個功能。 第二個循環使第二個循環無效，並使我失去一些重要的功能。 這兩個循環如下：

//循環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和顯示這些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的新手，所以我什至不知道要搜索什么來弄清楚它。

謝謝！ 邁克·萊格西

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屬性沒有意義。