Question

我不知道如何描述这一点而不会让它变得更复杂所以看一下代码的结果，点击第一个链接“Show”，然后点击第二个和第三个链接单击第二个链接时，第一个链接关闭，但文本仍为“隐藏”，我希望它更改为“显示” 因此，当点击链接时，检测是否有任何其他链接有文本“隐藏”并将其更改为“显示” 请不要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

我尝试编写一个完全不使用任何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>

Answer 2

赞this？

刚刚将以下内容添加到closeOther()：

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

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

2 个答案: