Question

我有两个循环控制我正在开发的网站上的两个功能。第二个循环排除第二个循环并导致我失去一些重要的功能。这两个循环如下：

// 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;" 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的新手，所以我甚至不知道要搜索什么来解决它。

谢谢！ Mike Legacy

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

我有两个冲突的循环

1 个答案: