Question

我是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 ....它保持欢迎世界，然后再次显示欢迎世界。

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

Answer 1

这应该这样做：

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

当你隐藏显示一个元素时，你必须要做的是，确保你隐藏另一个元素。

当另一个打开时关闭1个javascript标签

1 个答案: