显示另一个 div 时隐藏一个 div答案

【问题标题】：Hiding a div when another is shown显示另一个 div 时隐藏一个 div
【发布时间】：2012-02-25 14:14:03
【问题描述】：

所以，我有一个带有无序列表的导航元素，用作标签。共有三个，您单击一个，它会在网站中显示一个 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>

我试图做类似的事情

document.getElementById("page"+id+1).style.display = "none";

我认为它会将显示样式更改为没有一个 id 比当前大一的 div，但它什么也不做。我会添加什么让它隐藏所有当前打开的标签？

【问题讨论】：

你能把html也粘贴一下吗？
仅供参考：如果您最终使用 jQuery，您也可以尝试使用 toggle() (api.jquery.com/toggle)。

标签： javascript html hide

【解决方案1】：

您也可以将DIV 名称存储在Hidden Input 中

http://jsfiddle.net/we2AJ/

<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>

【讨论】：

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

【解决方案2】：

您可以通过利用 css 类来改进此代码的结构。首先，使用getElementsByClassName 收集所有导航项目。然后为它们附加一个指向您的切换代码的点击处理程序。

在切换代码中，为显示的元素添加一个类并为旧元素删除它。我对你的 html 结构做了假设，但这应该很容易适应。 substitute in a regex 处理此问题。

http://jsfiddle.net/8Q4vy/1/

<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>

【讨论】：