如何使用JS选择<li>标签

Question

<style>
     .sys_spec_text{}
     .sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline: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;}
     .sys_spec_text li a:hover{ 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.selected a{ border:2px solid #e4393c; padding:0 5px;}
    .sys_spec_text li.selected i{ display:block;}
</style>


<ul class="sys_spec_text">
    <li ><a href="javascript:;" title="xl">xl</a><i></i></li>
    <li ><a href="javascript:;" title="l">l</a><i></i></li>
</ul>

手动单击鼠标时，li边框变为红色，但是如何使用JavaScript自动单击呢？

Answer 1

请使其更清楚。正如我从CSS中看到的那样，当鼠标悬停时，您会显示li border。但是，然后您询问如何通过单击使其相同。因此，这将导致这种情况：元素没有边界并进一步留在边界，因为没有事件可将其删除。

还可以将：active 伪类用于与 click js事件相同的锚元素。

如果要模仿悬停事件，可以听'mouseenter'/'mouseleave'事件，使其与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>

Answer 2

这会做你想要的。

在CSS中，用红色边框定义clicked样式。

在javascript中，添加侦听器以检测点击，然后将document.querySelectorAll("li").forEach(li => { li.addEventListener("click", function(event) { event.target.classList.add("clicked"); }); });类添加到元素。

<style>
    .sys_spec_text{}
    .sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline: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;}
    .sys_spec_text li a:hover,
    .sys_spec_text li .clicked { 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.selected a{ border:2px solid #e4393c; padding:0 5px;}
    .sys_spec_text li.selected i{ display:block;}
</style>

<ul class="sys_spec_text">
    <li ><a href="javascript:;" title="xl">xl</a><i></i></li>
    <li ><a href="javascript:;" title="l">l</a><i></i></li>
</ul>

{{1}}

Answer 3

使用setInterval()方法并定期检查并相应地触发事件。