Question

我试图在几个文本之间切换，其中唯一一个显示的是＃34;开启＆＃34;最近。例如，默认值如下所示：

单击A. 单击B

如果您点击＆＃39;点击B＆＃39;，其中的文字将切换为其他内容，让我们说＆＃34;您已点击B＆＃34;。

单击A. 您已点击B

如果您点击＆＃39;点击A＆＃39;之后，之前的文字将恢复默认状态，即＆＃34;您点击了B＆＃34;将恢复为“点击B＆＃39;然后点击A＆＃39;将会开启。

现在，他们都没有切换，他们只是两个都在。这就是我所拥有的：

的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

如果您像这样为next标记分配ID并且添加了一些属性，那就更好了：

<h1>

对于JS，您可以使用：

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

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>

应该有一个结束“＆gt;”在我标记****的地方附近。同样，您尚未使用“</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函数范围之外声明的变量中当前切换的“文本”。这使您可以轻松地关闭任何当前可见的文本并打开所需的文本。

这是一个JSFiddle。

切换多个文本的可见性无效

3 个答案: