Javascript 显示另一个div时隐藏另一个div_Javascript_Html_Hide

Javascript 显示另一个div时隐藏另一个div

javascript html

Javascript 显示另一个div时隐藏另一个div,javascript,html,hide,Javascript,Html,Hide,所以，我有一个nav元素，它有一个无序列表，我用它作为选项卡。有三个，你点击一个，它会在网站上显示一个div。但是，我希望这样，如果您单击另一个，它将隐藏当前正在显示的，然后显示您单击的。但我似乎不能把它弄对。以下是我的功能： function display(action, id) { if (action == 'show') { document.getElementById("page"+id).style.display = "block"; document.getElem

所以，我有一个nav元素，它有一个无序列表，我用它作为选项卡。有三个，你点击一个，它会在网站上显示一个div。但是，我希望这样，如果您单击另一个，它将隐藏当前正在显示的，然后显示您单击的。但我似乎不能把它弄对。以下是我的功能：

function display(action, id)
 {
 if (action == 'show')
 {
 document.getElementById("page"+id).style.display = "block";
 document.getElementById("link"+id).href= "javascript:display('hide', "+id+")";
 }

if (action == 'hide')
 {
 document.getElementById("page"+id).style.display = "none";
 document.getElementById("link"+id).href= "javascript:display('show', "+id+")";
 }
 }

</script>

功能显示（动作，id）
{
如果（操作=='show'）
{
document.getElementById（“page”+id）.style.display=“block”；
document.getElementById（“link”+id）.href=“javascript:display（'hide'，“+id+”）”；
}
如果（操作=='hide'）
{
document.getElementById（“页面”+id）.style.display=“无”；
document.getElementById（“link”+id）.href=“javascript:display（'show'，“+id+”）；
}
}

我试着做一些类似的事情

document.getElementById（“页面”+id+1）.style.display=“无”

我原以为它会将显示样式更改为id比当前多1的div，但实际上它什么也不做。我要添加什么来隐藏所有当前打开的选项卡？

您可以通过利用css类来改进代码的结构。首先，使用

getElementsByClassName

收集所有导航项目。然后将指向切换代码的单击处理程序附加到它们

在togglecode中，为显示的元素添加一个类，并删除旧元素的类。我对html结构做了一些假设，但这应该很容易适应。

A
B
C
//获取导航项目
var navElems=document.getElementsByClassName（'nav'）；
//将单击处理程序附加到每个
对于（变量i=0；i

您可以通过利用css类来改进此代码的结构。首先，使用

getElementsByClassName

收集所有导航项目。然后将指向切换代码的单击处理程序附加到它们

在togglecode中，为显示的元素添加一个类，并删除旧元素的类。我对html结构做了一些假设，但这应该很容易适应。

A
B
C
//获取导航项目
var navElems=document.getElementsByClassName（'nav'）；
//将单击处理程序附加到每个
对于（变量i=0；i

您还可以将

DIV

名称存储在

隐藏输入中


函数MyFunction（divName）{
//隐藏val
var hiddenVal=document.getElementById（“tempDivName”）；
//藏旧
if（hiddenVal.Value！=未定义）{
var oldDiv=document.getElementById（hiddenVal.Value）；
oldDiv.style.display='none'；
}
//节目组
var tempDiv=document.getElementById（divName）；
tempDiv.style.display='block'；
//保存分区ID
hiddenVal.Value=document.getElementById（divName.getAttribute（“id”）；
}







myDiv1
myDiv2
myDiv3

您还可以将

DIV

名称存储在

隐藏输入中


函数MyFunction（divName）{
//隐藏val
var hiddenVal=document.getElementById（“tempDivName”）；
//藏旧
if（hiddenVal.Value！=未定义）{
var oldDiv=document.getElementById（hiddenVal.Value）；
oldDiv.style.display='none'；
}
//节目组
var tempDiv=document.getElementById（divName）；
tempDiv.style.display='block'；
//保存分区ID
hiddenVal.Value=document.getElementById（divName.getAttribute（“id”）；
}







myDiv1
myDiv2
myDiv3

您也可以粘贴html吗？仅供将来参考：如果您最终使用jQuery，您也可以尝试使用

toggle（）

（）。您也可以粘贴html吗？仅供将来参考：如果您最终使用jQuery，您可以尝试使用

toggle（）

（），我宁愿在函数外部使用全局javascript变量var visible='myDiv1'，然后删除隐藏的输入类型。使用该全局变量存储在单击链接/选项卡时可见的内容。我宁愿在函数外部使用全局javascript变量var visible='myDiv1'，然后删除隐藏的输入类型。使用该全局变量存储单击链接/选项卡时可见的内容。

<div class="nav show"><span>A</span></div>
<div class="nav"><span>B</span></div>
<div class="nav"><span>C</span></div>
<script>
    //get nav items
    var navElems = document.getElementsByClassName('nav');

    //attach click handler to each
    for (var i = 0; i < navElems.length; i++) {
        navElems[i].onclick = toggleVisible;
    }

    //handle click events
    function toggleVisible() {
        //hide currently shown item
        document.getElementsByClassName('show')[0].classList.remove('show');
        //show clicked item
        this.classList.add('show');
    }
</script>

<body>
    <script language="javascript">
        function MyFunction(divName){

        //hidden val
        var hiddenVal = document.getElementById("tempDivName"); 

        //hide old
        if(hiddenVal.Value != undefined){
            var oldDiv = document.getElementById(hiddenVal.Value); 
            oldDiv.style.display = 'none'; 
        }

        //show div
            var tempDiv = document.getElementById(divName); 
            tempDiv.style.display = 'block';              

        //save div ID
            hiddenVal.Value = document.getElementById(divName).getAttribute("id");

        }
    </script>
    <input id="tempDivName" type="hidden" />
    <ul>
        <li><a href="#" OnClick="MyFunction('myDiv1');">Show myDiv1</a></li>
        <li><a href="#" OnClick="MyFunction('myDiv2');">Show myDiv2</a></li>
        <li><a href="#" OnClick="MyFunction('myDiv3');">Show myDiv3</a></li>
    </ul>
    <br/>
    <div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none">
        myDiv1
    </div>
    <div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none">
        myDiv2
    </div>
    <div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none">
        myDiv3
    </div>
</body>