Посещенные Вкладки эффект 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 для якоря (<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>