ページが最初にロードされたときに div の 1 つが開き、他の div が開いたときに閉じるように、次のコードをどのように適応させることができますか?
現在のように、コードは別の div が開いているときに開いている 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>
これは、これまでのところ、開いている 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>