javascript - 不需要的元素突出显示

Question

所以我有一个点导航，但是当我在第三个点下或三个点的左侧单击一次时，有一个红色框突出显示，我已经尝试过user-select: none甚至::selection属性并将背景颜色设置为透明但突出显示仍然存在，是否有任何其他 css 属性或方法可以取消它？

$(document).ready(() => {
    document.getElementById("event").addEventListener("click", e => {
        const allItems = $('#event > li');

        for (let i = 0; i < allItems.length; i++) {
            allItems[i].classList.remove("is-active");
        }
        e.target.classList.add("is-active");
    })
});

html{
user-select: none;
}

::selection{
background-color: transparent;
}

.is-active{
  transform: scale(1.2);
  background: red !important;
}

#vertical-nav {
	 position: fixed;
	 z-index: 3;
	 right: 15px;
	 bottom: 0;
	 margin: auto 0;
	 height: 100%;
	 display: flex;
	 align-items: center;
}
 #vertical-nav ul > li {
	 background: black;
	 width: 13px;
	 height: 13px;
	 margin-bottom: 15px;
	 border-radius: 50%;
	 transition: 0.4s ease-in-out;
}
 #vertical-nav ul > li a {
	 display: none;
	 float: right;
	 color: black;
	 margin-right: 13px;
	 margin-top: -5px;
	 font-size: 10px;
	 transition: 0.4s ease-in-out;
	 padding: 3px;
	 border-radius: 10px;
}
 #vertical-nav ul > li:hover {
	 cursor: pointer;
	 transform: scale(1.2);
	 background: lightgrey;
}
 #vertical-nav ul > li:hover a {
	 //opacity: 1;
}
 #vertical-nav ul > li:hover a {
	 //opacity: 1;
}
 
 ul > li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="vertical-nav">
        <ul id="event">
          <li>
            <a data-number="1">Home</a>
          </li>
          <li>
            <a data-number="2">About</a>
          </li>
          <li>
            <a data-number="3">Contact</a>
          </li>
        </ul>
      </nav>

标签： javascripthtmlcss

Answer 1

为什么不一路用jQuery，不检查UL的点击

您的代码的问题是您在单击 LI 旁边时将 is-active 添加到 UL

$(document).ready(() => {
  $("#event li").on("click", function() {
    $(this).siblings().removeClass("is-active");
    $(this).addClass("is-active");
  })
});

html {
  user-select: none;
}

::selection {
  background-color: transparent;
}

.is-active {
  transform: scale(1.2);
  background: red !important;
}

#vertical-nav {
  position: fixed;
  z-index: 3;
  right: 15px;
  bottom: 0;
  margin: auto 0;
  height: 100%;
  display: flex;
  align-items: center;
}

#vertical-nav ul>li {
  background: black;
  width: 13px;
  height: 13px;
  margin-bottom: 15px;
  border-radius: 50%;
  transition: 0.4s ease-in-out;
}

#vertical-nav ul>li a {
  opacity: 0;
  float: right;
  color: black;
  margin-right: 13px;
  margin-top: -5px;
  font-size: 10px;
  transition: 0.4s ease-in-out;
  padding: 3px;
  border-radius: 10px;
}

#vertical-nav ul>li:hover {
  cursor: pointer;
  transform: scale(1.2);
  background: lightgrey;
}

#vertical-nav ul>li:hover a {
  //opacity: 1;
}

#vertical-nav ul>li:hover a {
  //opacity: 1;
}

ul>li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="vertical-nav">
  <ul id="event">
    <li>
      <a data-number="1">Home</a>
    </li>
    <li>
      <a data-number="2">About</a>
    </li>
    <li>
      <a data-number="3">Contact</a>
    </li>
  </ul>
</nav>