0

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

就像现在一样，代码会在另一个打开时隐藏打开的 div，但前提是该 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" />
    <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>

到目前为止，这就是我对其进行调整以使其可以从打开的 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 ►&lt;/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>
4

1 回答 1

1

你可以添加一个调用来MyFunction自动显示一个。

因此，在 div 之后，您可以添加

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

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

于 2013-10-08T02:00:53.073 回答