Please make it more clear. As I see from css, you show li border when it hovered. But then you ask about how to make the same with click. So it will lead to the situation when the element got border and further stay with it because there is no event to remove it.
Also you can use :active pseudo-class for anchor element that is the same as click js event.
If you want to immitate hover event you can listen to 'mouseenter'/'mouseleave' events to make the same as you did with css.
let listEls = [...document.querySelectorAll('.link')]
let firstLi = listEls[0]
/* === CLICK SECTION === */
// This is "click" event listener
listEls.forEach(e => {
e.addEventListener('click', event => {
console.log('link is clicked', event)
event.target.classList.add('selected')
})
});
// here we manually trigger "click" event on the first li
firstLi.click()
// The problem is that "selected" class has been added but if there is no method to remove it. Let's fix it
document.addEventListener('click', e => {
console.log(e)
if (!e.target.classList.contains('link')) {
listEls.forEach(el => el.classList.remove('selected'))
}
})
// Now if any li was clicked and has "selected" class, you can click anywhere else to remove it
/* === END CLICK SECTION === */
/* === HOVER SECTION === */
// To se how hover works comment the CLICK SECTION above and uncomment this HOVER SECTION
// DO not forget to comment hover rule for link in css
/*
listEls.forEach(e => {
e.addEventListener('mouseenter', e => {
console.log(e)
e.target.classList.add('selected')
})
});
listEls.forEach(e => {
e.addEventListener('mouseleave', e => {
e.target.classList.remove('selected')
})
});
*/
/* === END HOVER SECTION === */
.sys_spec_text {}
.sys_spec_text li {
float: left;
height: 28px;
position: relative;
margin: 2px 6px 2px 0;
outline: none;
list-style-type: none;
}
.sys_spec_text li a {
color: #db0401;
height: 24px;
padding: 1px 6px;
border: 1px solid #ccc;
background: #fff;
display: inline-block;
line-height: 24px;
}
/* If you want to check mouseenter/mouseleave events comment following block */
.sys_spec_text li a:hover {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
/* OR you can use :active pseudo-class, so then you have to disable js "click" event listener and comment :hover block above */
/*
.sys_spec_text li a:active {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
*/
.sys_spec_text li a.selected {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
<ul class="sys_spec_text">
<li><a class="link" href="javascript:void(0)" title="xl">xl</a><i></i></li>
<li><a class="link" href="javascript:void(0)" title="l">l</a><i></i></li>
</ul>
