我有两个正在发生冲突的循环

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 属性是没有意义的。