如何通過點擊另一個標籤來更改一個標籤的類和文本？

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>