Javascript 切换多个文本的可见性不起作用

我试图在两个文本之间切换，其中唯一显示的是最近“打开”的文本。例如，默认值如下所示：

点击 点击B

如果您单击“单击B”，则该文本将切换到其他文本，例如“您已单击B”

点击 你点击了B

如果随后单击“单击A”，则上一个文本将返回其默认文本，即“您已单击B”将恢复为“单击B”，然后“单击A”将打开

现在，他们两个都没有切换，只是两个都打开了。 以下是我所拥有的：

JavaScript

    toggle_visibility("t1");
    toggle_visibility("t2");

function toggle_visibility(id) {

    function toggle(id){
        var text = document.getElementById(id);
        if(text.style.display == 'none'){
            text.style.display = 'block';
        }
        else{
            text.style.display = 'none';
        }
    }
  toggle(id);
}

HTML

---

最好像这样为
标记分配一个id，我添加了一些属性：

<div> <a href="#" onclick="toggle_visibility('t1');">
        <h1 id="t1" data-original="Click A" data-after="You've clicked A" data-toggled="0">Click A</h1></div>
 <div> <a href="#" onclick="toggle_visibility('t2');">
        <h1 id="t2" data-original="Click B" data-after="You've clicked B" data-toggled="0">Click B</h1></div>


点击
点击B

对于JS，您可以使用以下方法：

<script>
var isFirst = true;

function toggle_visibility(id) {
    if(!isActivated(id)) {
        toggle(id);

        if(isFirst != true) {
            if(id == "t1") {
                toggle("t2");   
            } else if(id == "t2") {
                toggle("t1");   
            }
        }
    }
    isFirst = false;

}

function toggle(id) {
    var text = document.getElementById(id);

    if(text.getAttribute("data-toggled") == "1") {
        text.setAttribute("data-toggled", "0");
        text.innerHTML = text.getAttribute("data-original");
    }
    else {
        text.innerHTML = text.getAttribute("data-after");
        text.setAttribute("data-toggled", "1");
    }
}

function isActivated(id) {
    var element = document.getElementById(id);

    if(element.getAttribute('data-toggled') == "1") {
        return true;
    } else {
        return false;

    }
}
</script>


var isFirst=true；
功能切换\u可见性（id）{
如果（！已激活（id））{
切换（id）；
如果（isFirst！=真）{
如果（id=“t1”）{
切换（“t2”）；
}否则如果（id=“t2”）{
切换（“t1”）；
}
}
}
isFirst=false；
}
功能切换（id）{
var text=document.getElementById（id）；
if（text.getAttribute（“数据切换”）=“1”）{
setAttribute（“数据切换”、“0”）；
text.innerHTML=text.getAttribute（“原始数据”）；
}
否则{
text.innerHTML=text.getAttribute（“后面的数据”）；
setAttribute（“数据切换”、“1”）；
}
}
功能已激活（id）{
var元素=document.getElementById（id）；
if（element.getAttribute（'data-toggled'）==“1”）{
返回true；
}否则{
返回false；
}
}
首先检查HTML

    <div id="t1">**** <a href="Click A" onclick="toggle_visibility('t1');">
        <h1>You've Clicked A</h1></div>
 <div id="t2">**** <a href="Click B" onclick="toggle_visibility('t2');">
        <h1>You've Clicked B</h1></div>

***
“
我不能确定我是否正确解释了您的HTML（其中有几个错误），但除此之外，我相信这解决了问题：

var visibleText;
function toggle_visibility(id) {
    var text = document.getElementById(id).lastElementChild;
    if (text.style.display === 'none') {
        if (visibleText) visibleText.style.display = 'none';
        visibleText = text;
        text.style.display = 'block';
    } else {
        text.style.display = 'none';
    }
}

此代码跟踪在
toggle_visibility
函数范围之外声明的变量中当前切换的任何“文本”。这使您可以轻松地关闭任何当前可见的文本并打开所需的文本

这里有一个。
看看我的答案，希望这就是你想要的。：）我相信他不想要标签页。他只是想要替换文本。
var visibleText;
function toggle_visibility(id) {
    var text = document.getElementById(id).lastElementChild;
    if (text.style.display === 'none') {
        if (visibleText) visibleText.style.display = 'none';
        visibleText = text;
        text.style.display = 'block';
    } else {
        text.style.display = 'none';
    }
}