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>

对我来说，这行得通。当您点击欢迎时，它会显示欢迎世界。当你点击welcome 1 ....它保持欢迎世界，然后也再次显示欢迎世界。

如果功能欢迎 1 打开，我是否可以关闭功能欢迎。

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