如何在Java脚本中隐藏DIV标签 [英] How to Hide DIV tags in Java Script

问题描述

如果您看到此问题，它工作正常，但我需要的是，一旦我单击"MENU1"，它会展开并显示子链接，当我再次单击它时，它将隐藏子链接.到这里为止都很好.现在我需要的是，如果我单击"MENU1"并且它仍处于可见状态，然后单击"MENU2"或"MENU3"，则单击上一个打开的菜单，即(MENU1)应该隐藏其子链接，而单击的链接应显示其子链接.因此得出的结论是，一次只能查看一组的子链接，而隐藏其余的链接..
在此先感谢您，如果有人可以为我提供解决方案，我将不胜感激.
这是代码.复制并粘贴即可正常使用..
谢谢

If you see at this problem it is working fine but what i require is that once i click ''MENU1'' that expands and displays the sublinks and when i click it again it hides the sublinks. It is fine till here.. Now what i require is if i click ''MENU1'' and it is still in visible state and i click ''MENU2'' or ''MENU3'' then the previous open Menu i.e(MENU1) should hide its sublinks and the one clicked should display its sublinks. So conclusion is that only sublinks of one group can be viewed at a time and hiding the rest..
Thanks in advance and i appreciate if anyone can sort me a solution.. Thanks

Here is the CODE. Copy and paste it to see it working..
Thanks

<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theid)
{
    if (document.getElementById)
    {
    var switch_id = document.getElementById(theid);
            if(menu_status[theid] != 'show')
        {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
        }
        else
        {
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
        }

    }
}
//-->
</script>
<style>

.hide{
display: none;
margin-left:2px;
margin-top:2px;
}

.show{
display: block;
margin-left:2px;
margin-top:2px;
}
</style>
<a  href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div id="mymenu1" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div id="mymenu2" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div>

推荐答案

请检查下面的脚本，它的工作正常.
我对您的脚本进行了一些更改.我希望它能满足您的要求.

Hi,
Please check below script, its working fine.
I have made some changes in your script. I hope it fulfills your requirement.

<script language="JavaScript" type="text/JavaScript">
<!--

function showHide(theid)
{

    if (document.getElementById)
    {
       HideOthers(theid);
       var switch_id = document.getElementById(theid);
        if(switch_id.className == 'hide')
        {
           switch_id.className = 'show';
        }
        else
        {
           switch_id.className = 'hide';
        }
    }
}
function HideOthers(theid)
{
    if(document.getElementsByName)
    {
        var eleArray = document.getElementsByName('hideGroup');
        for(i=0;i<eleArray.length;i++)
        {
            if(eleArray[i].id != theid)
            {
                eleArray[i].className = 'hide';
            }
        }
    }
}
//-->
</script>
<style>

.hide{
display: none;
margin-left:2px;
margin-top:2px;
}

.show{
display: block;
margin-left:2px;
margin-top:2px;
}
</style>
<a  href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div name="hideGroup" id="mymenu1" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div name="hideGroup" id="mymenu2" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div name="hideGroup" id="mymenu3" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div>

尊敬的Zaa！

感谢您的答复，非常感谢您对此问题的关注，但是我们在这里遇到了一些问题..您发布的代码在Mozilla Firefox中运行:)，但在Internet Explorer中不起作用:( ..
您能在这方面解决一些问题吗?
谢谢男人..
等待您的回复.

Dear Zaa!

Thanks for the response and i highly appreciate your concern towards the issue but we have a little problem over here.. The code you have posted is working in Mozilla Firefox :), but it is not working in Internet Explorer :( ..
Can you sort out something in that regard..
Thanks Man..
Waiting for your reply..

这篇关于如何在Java脚本中隐藏DIV标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！