0

私はJavaScriptをいじくり回しているだけですが、JavaScriptを初めて使用するので、これはおそらく単純な解決策です。基本的に私が望んでいるのはdiv、一度に1つだけが表示されるようにすることです。したがって、ユーザーが1つのリンクをクリックして公開すると、公開されてdivいる電流divが折りたたまれ、クリックされた新しい電流が表示されます。

以下のコードを含めました：

<html> 
    <head>

        <title> test</title>
        <LINK href="blah.css" rel="stylesheet" type="text/css">
        <script language="javascript" type="text/javascript">
        function toggle2(showHideDiv, switchTextDiv) {
    var ele = document.getElementById(showHideDiv);
    var text = document.getElementById(switchTextDiv);
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "restore";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "collapse";
    }
}
    function toggle22(showHideDiv2, switchTextDiv2) {
    var ele = document.getElementById(showHideDiv2);
    var text = document.getElementById(switchTextDiv2);
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "restore";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "collapse";
    }
}


        </script>
    </head>
    <body>
        <div id="mainContent">    
<div id="headerDiv">
     <div id="titleText">Change Password - Click here ==></div><a id="myHeader" href="javascript:toggle2('myContent','myHeader');" >restore</a>
</div>

<div style="clear:both;"></div>

<div id="contentDiv">
     <div id="myContent" style="display: none;">This is the content that is dynamically being collapsed.</div>

<!--DIV2 -->

<div id="headerDiv2">
     <div id="titleText2">Change Username - Click here ==></div><a id="myHeader2" href="javascript:toggle22('myContent2','myHeader2');" >restore</a>
</div>

<div style="clear:both;"></div>

<div id="contentDiv2">
     <div id="myContent2" style="display: none;">This is the content that is dynamically being collapsed.</div>




</div>
        </div>
    </body>
</html>

CSS：

#headerDiv, #contentDiv {
float: left;
width: 510px;
}
#titleText {
float: left;
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#myHeader {
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#headerDiv {
background-color: #0037DB;
color: #9EB6FF;
}
#contentDiv {
background-color: #FFE694;
}
#myContent {
margin: 5px 10px;
}
#headerDiv a {
color: gold;
float: right;
margin: 10px 10px 5px 5px;
}
#headerDiv a:hover {
color: #FFFFFF;
}




#headerDiv2, #contentDiv2 {
float: left;
width: 510px;
}
#titleText2 {
float: left;
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#myHeader2 {
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#headerDiv2 {
background-color: #0037DB;
color: #9EB6FF;
}
#contentDiv2 {
background-color: #FFE694;
}
#myContent2 {
margin: 5px 10px;
}
#headerDiv2 a {
color: gold;
float: right;
margin: 10px 10px 5px 5px;
}
#headerDiv2 a:hover {
color: #FFFFFF;
}
4

1 に答える 1

0

style.display要素に明示的に設定されているスタイルのみを反映します。style="display:block"HTMLでで指定しない限りstyle.display、CSSカスケードによって適用されるそのプロパティのデフォルト値が実際にであっても、の初期値は空になりますblock。

于 2012-11-26T00:56:16.033 に答える