0

私はJavaScriptが初めてで、オンラインで見つかったコードを使用および編集しています。

これまでのところ、これは機能します。

 <script language="javascript">
 function welcome() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "welcome";
    } else {
        ele.style.display = "welcome";
        text.innerHTML = "Planning Statements";
        document.getElementById("toggleText1").style.display = 'none';
        document.getElementById("toggleText2").style.display = 'none';
    }
}

function welcome1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "welcome 1";
    } else {
       ele.style.display = "block";
       text.innerHTML = "welcome1";
       document.getElementById("toggleText").style.display = 'none';
       document.getElementById("toggleText2").style.display = 'none';
    }
}

function welcome2() {
    var ele = document.getElementById("toggleText2");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "welcome 2";
    } else {
       ele.style.display = "block";
       text.innerHTML = "welcome2";

    }
}
    </script>

                    <li style="text-align:left; margin-left:5px;"><a id="displayText" href="javascript:welcome();">welcome</a></li>
                    <li style="text-align:left; margin-left:5px;"><a id="displayText1" href="javascript:welcome1();">welcome 1</a></li>
                    <li style="text-align:left; margin-left:5px;"><a id="displayText2" href="javascript:welcome2();">welcome 2</a></li>

    <div id="toggleText" style="display: none">
    <p>Welcome World!</p>
    </div>
    <div id="toggleText1" style="display: none">
    <p>Welcome World again!</p>
    </div>
    <div id="toggleText2" style="display: none">
    <p>Welcome World again wow!</p>
    </div>

私にとってはうまくいきます。ウェルカムを押すと、ウェルカム ワールドが表示されます。ウェルカム 1 を押すと、ウェルカム ワールドが保持され、ウェルカム ワールドが再度表示されます。

関数welcome 1が開いた場合、関数welcomeを閉じる方法はありますか。

4

1 に答える 1

0

これはそれを行う必要があります：

<script language="javascript">

function welcome() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Welcome";
    } else {
        ele.style.display = "block";
        text.innerHTML = "Welcome";
        document.getElementById("toggleText1").style.display = 'none';
    }
}

function welcome1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Welcome 1";
    } else {
       ele.style.display = "block";
       text.innerHTML = "Welcome 1";
       document.getElementById("toggleText").style.display = 'none';
    }
}
</script>

<div id="toggleText" style="display: none">
<p>Welcome World!</p>
</div>
<div id="toggleText1" style="display: none">
<p>Welcome World again!</p>
</div>

あなたがしなければならないのは、要素を非表示にするときは、他の要素を必ず非表示にすることです。

于 2013-04-12T22:38:16.190 に答える