Question

如何调整以下代码，以便在首次加载页面时打开其中一个div，但在打开其他div时关闭？

就像现在一样，当另一个打开div时，代码会隐藏open div，但只有在加载页面时关闭div才会生效。

我在这里找到了代码：Hiding a div when another is shown 所以，无论谁发布它，都要归功于它。

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

这是我到目前为止调整它的方式，因此可以从open div访问每个后续的div，但是当我打开第一个div时，我的（不熟练的）修补工作都没有能够使代码工作首先，我也没有能够使用搜索引擎找到答案。

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

  <div align="center"><a href="#" OnClick="MyFunction('myDiv1');">Contents</a></div>


    <div id="myDiv1" style="display:none">
       <a href="#" OnClick="MyFunction('myDiv2');">Page 1</a>
      <br/>
        <a href="#" OnClick="MyFunction('myDiv3');">Page 2</a>
    </div>
    <div id="myDiv2" style="display:none">
      <div align="right"><a href="#" OnClick="MyFunction('myDiv3');">Page 2 ►</a></div> 
      <br/>
     text page 1
    </div>
    <div id="myDiv3" style="display:none">
       <a href="#" OnClick="MyFunction('myDiv2');">◄ Page 1</a> 
        <br/>
      <br/>
      text page 2
    </div>
</body>

Answer 1

您只需添加一个MyFunction来自动显示一个。

所以，在div之后，你可以添加

<script>
    MyFunction('myDiv1');
</script>

jsfiddle：http://jsfiddle.net/cyberdash/x8nQs/

显示另一个时隐藏默认div

1 个答案: