html - 访问效果选项卡 CSS

Question

.Tab1 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-clip: content-box;
  width: 100px;
  height: 75px;
  display: block;
  padding: 20px;
}
.Tab1:hover {
  border: 2px solid #8CC63F;
}
.Tab1:visited {
  border: 2px solid #8CC63F;
}
.Tab2 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons3.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-clip: content-box;
  width: 100px;
  height: 75px;
  display: block;
  padding: 20px;
}
.Tab2:hover {
  border: 2px solid #8CC63F;
}

<ul>
  <li class="Tab1"></li>
  <li class="Tab2"></li>
</ul>

我有这个列表，我希望当用户选择一个元素时，该元素有边框 2px solid #8CC63F。

我的尝试在代码中看到，但不幸的是不起作用。

你能帮我解决这个问题吗？

提前致谢!

Answer 1

嗯，它不起作用，因为据我所知:visited用于 anchor ( <a> ) 标记链接元素

所以要在列表元素上实现它，您只需添加一个类 onClick

var listArray = document.querySelectorAll("[class^=Tab]");

function setVisited() {
  this.classList.add("visited")
}

for ( var list = 0; list < listArray.length;  list++) {
  listArray[list].addEventListener("click", setVisited , false)
}

ul li{border:2px solid transparent; margin-bottom: 10px}
ul li:hover,ul li.visited{border:2px solid #8CC63F;}

<ul>
  <li class="Tab1">Tab1</li>
  <li class="Tab2">Tab2</li>
</ul>

使用 Jquery 你可以做到这一点

$("[class^=Tab]").click(function(){$(this).addClass("visited")})

ul li{border:2px solid transparent; margin-bottom: 10px}
ul li:hover{border:2px solid #8CC63F;}
ul li.visited{border:2px solid #8CC63F;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li class="Tab1">Tab1</li>
  <li class="Tab2">Tab2</li>
</ul>