如何通过点击另一个标签来更改一个标签的类和文本？

Question

我不知道如何描述这一点，而不会使它更复杂。
所以看看代码的结果，点击第一个链接的“显示”，然后第二个和第三个。
当第二个链接被点击时，第一个关闭，但文本仍然是“隐藏”，我希望它更改为“显示”。
因此，点击链接时，检测是否有其他链接有文本“隐藏”，并将其更改为“显示”。
并请没有jQuery的...

document.getElementsByClassName("show")[0].onclick = function() { 
 
    var x = document.getElementsByClassName("hide")[0]; 
 
    var y = document.getElementsByClassName("show")[0]; 
 
    if (x.classList.contains("visible")) { 
 
    x.classList.remove("visible"); 
 
    y.textContent = "Show"; 
 
    } else { 
 
    closeOther(); 
 
    x.classList.add("visible"); 
 
    y.textContent = "Hide"; 
 
    } 
 
}; 
 

 
document.getElementsByClassName("show")[1].onclick = function() { 
 
    var x = document.getElementsByClassName("hide")[1]; 
 
    var y = document.getElementsByClassName("show")[1]; 
 
    if (x.classList.contains("visible")) { 
 
    x.classList.remove("visible"); 
 
    y.textContent = "Show"; 
 
    } else { 
 
    closeOther(); 
 
    x.classList.add("visible"); 
 
    y.textContent = "Hide"; 
 
    } 
 
}; 
 

 
document.getElementsByClassName("show")[2].onclick = function() { 
 
    var x = document.getElementsByClassName("hide")[2]; 
 
    var y = document.getElementsByClassName("show")[2]; 
 
    if (x.classList.contains("visible")) { 
 
    x.classList.remove("visible"); 
 
    y.textContent = "Show"; 
 
    } else { 
 
    closeOther(); 
 
    x.classList.add("visible"); 
 
    y.textContent = "Hide"; 
 
    } 
 
}; 
 

 
function closeOther() { 
 
    var visible = document.querySelectorAll(".visible"), 
 
    i, l = visible.length; 
 
    for (i = 0; i < l; ++i) { 
 
    visible[i].classList.remove("visible"); 
 
    } 
 
}

.style { 
 
    background-color: yellow; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
} 
 

 
.hide { 
 
    background-color: red; 
 
    width: 50px; 
 
    height: 50px; 
 
    display: none; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
.hide.visible { 
 
    display: block; 
 
}

<div class="style"> 
 
    <a href="#" class="show">Show</a> 
 
    <div class="hide"> 
 

 
    </div> 
 
</div> 
 
<div class="style"> 
 
    <a href="#" class="show">Show</a> 
 
    <div class="hide"> 
 

 
    </div> 
 
</div> 
 
<div class="style"> 
 
    <a href="#" class="show">Show</a> 
 
    <div class="hide"> 
 

 
    </div> 
 
</div>

Answer 1

像this？

只需添加以下到closeOther()：

visible = document.querySelectorAll(".show"), 
i, l = visible.length; 
for (i = 0; i < l; ++i) { 
visible[i].textContent="Show"; 
} 

Answer 2

我试着写这根本不使用任何JavaScript的解决方案，并单独使用CSS工作。我无法让它工作，虽然 - CSS可以识别focus，但它不能识别blur（即当focus刚刚被删除）。

因此，这里是使用JavaScript和classList API，而不是一个解决方案：

var divs = document.getElementsByTagName('div'); 
 

 
function toggleFocus() { 
 

 
    for (var i = 0; i < divs.length; i++) { 
 
     if (divs[i] === this) continue; 
 
     divs[i].classList.add('show'); 
 
     divs[i].classList.remove('hide'); 
 
    } 
 

 
    this.classList.toggle('show'); 
 
    this.classList.toggle('hide'); 
 
} 
 

 
for (let i = 0; i < divs.length; i++) { 
 
    divs[i].addEventListener('click', toggleFocus, false); 
 
}

div { 
 
display: inline-block; 
 
position: relative; 
 
width: 140px; 
 
height: 140px; 
 
background-color: rgb(255,255,0); 
 
} 
 

 
.show::before { 
 
content: 'show'; 
 
} 
 

 
.hide::before { 
 
content: 'hide'; 
 
} 
 

 
div::before { 
 
color: rgb(0,0,255); 
 
text-decoration: underline; 
 
cursor: pointer; 
 
} 
 

 
.hide::after { 
 
content: ''; 
 
position: absolute; 
 
top: 40px; 
 
left: 40px; 
 
width: 50px; 
 
height: 50px; 
 
background-color: rgb(255,0,0); 
 
}

<div class="show"></div> 
 
<div class="show"></div> 
 
<div class="show"></div>