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

Question

我正在尝试在几个文本之间切换，其中唯一显示的是最近 "turn on" 的那个。例如，默认值如下所示：

点击一个点击 B

如果您单击 'Click B'，该文本将切换为其他内容，比方说 "You've clicked B"。

点击一个您点击了 B

如果您随后点击 'Click A'，那么之前的文本将恢复为默认值，即 "You've Clicked B" 将恢复为 'Click B' 然后 'Click 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

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

Answer 1

如果你像这样给<h1>标签分配一个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>

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

Answer 2

先检查你的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>

我标记****的地方应该有一个结束的“>”。同样，您没有使用“</a>”

关闭您的锚标签

Answer 3

我不确定我是否正确解释了您的 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 函数范围之外声明的变量中任何当前打开的 'text'。这使您可以轻松关闭任何当前可见的文本并打开所需的文本。

这里是 JSFiddle。

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

Toggling visibility of multiple texts is not working

html

javascript

toggle