Question

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

我的尝试在代码中看到，但遗憾的是无效。

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

提前致谢！

Answer 1

好吧它没有用，因为据我所知:visited是锚（<a>）标签链接元素

所以要在list元素上实现它，你只需添加一个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>

访问效果选项卡CSS

1 个答案: