单击活动时如何删除背景颜色 class

Question

    filterSelection("all")
    function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("filterDiv");
      if (c == "all") c = "";
      for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
      }
    }
    
    function w3AddClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
      }
    }
    
    function w3RemoveClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
          arr1.splice(arr1.indexOf(arr2[i]), 1);     
        }
      }
      element.className = arr1.join(" ");
    }
    
    // Add active class to the current button (highlight it)
    var btnContainer = document.getElementById("myBtnContainer");
    var btns = btnContainer.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function(){
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }

        .filterDiv {
          float: left;
          margin: 2px;
          display: none;
        }
        .btn
        {
            list-style: none;
            display: inline-block;
        }
        .show {
          display: block;
        }
        
        .container {
          margin-top: 20px;
          overflow: hidden;
        }
        
        /* Style the buttons */
        .btn {
          border: none;
          outline: none;
          padding: 12px 16px;
          cursor: pointer;
        }

        /* animation duration */
        #para
        {
            animation-duration: 2s;
        }

        #myBtnContainer
        {
          display: flex;
          overflow-x: auto;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <title>Document</title>
</head>
    
        <body>
        
        <h2>Sample</h2>
        
        <div id="myBtnContainer">
          <li class="btn active" onclick="filterSelection('all')"> Show&nbsp;all</li>
          <li class="btn" onclick="filterSelection('sam')"> sam</li>
          <li class="btn" onclick="filterSelection('jhon')"> jhon</li>
          <li class="btn" onclick="filterSelection('rog')"> rog</li>
          <li class="btn" onclick="filterSelection('stv')"> stv</li>
          <li class="btn" onclick="filterSelection('scott')"> scott</li>
        </div>
        
        <div class="container">
          <div class="filterDiv all w3-container w3-animate-bottom" id="para">
              <h4>what is food</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>

                <h4>lorem ipsum</h4>
                            <p> lorem ipsum
                  </p>
                            <h4>lorem ipsum</h4>
                            <p class="text">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
          </div>
          <div class="filterDiv sam  w3-container w3-animate-bottom" id="para">
            <h4>lorem ipsum</h4>
                            <p>   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
                            <h4 >What is the Cricket Live Scores API?</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t
                             </p>
          </div>
          
          <div class="filterDiv jhon  w3-container w3-animate-bottom" id="para">
            <h4>lorem ipsum</h4>
            <p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
                <h4>lorem ipsum</h4>
                <p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
          </div>
          <div class="filterDiv rog  w3-container w3-animate-bottom" id="para">
            <h4>lorem ipsum</h4>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
          </div>
          <div class="filterDiv stv  w3-container w3-animate-bottom" id="para">
            <h4>lorem ipsum</a></h4>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
          </div>
        </div>
</body>
 

</html>

以上截图来自我的phone.

问题是如何去除点击所有列表标签时出现在背景上的蓝色？我没有在我的 css.
我尝试使用 css 中的焦点，但没有用。
我想如下图所示实现它。

我在使用 w3schools 时遇到了数据过滤。我在网上看到了一些非常好的例子，我想尝试一个，但我被困在这个例子中，因为我无法理解图像中的蓝色是从哪里来的。

Answer 1

这是一个示例，说明如何使用数据集属性和 JS 来更改 ROOT 元素中的移动百分比，以将您的 HR 移动到列表项按钮下方。

您将 HR 设置在 HTML 中的 LI 元素下方，这样您就可以使用 CSS 通过将 HR 与一般同级选择器一起定位，为每个按钮使用唯一选择器来定位 HR ~。将 HR 元素设置为绝对并设置宽度和背景颜色的样式，然后您可以在悬停每个按钮元素 .show-all:hover ~ hr.

时使用左侧属性定位它

现在我们将 hr 的原始值设置为 CSS 变量

:root {
  --active: 24px;
}

然后在hr元素中我们将原来的left属性设置为那个变量

  left: var(--active);

然后在设置你的activeclass的JS函数中你可以添加下面一行：document.documentElement.style.setProperty('--active, this.dataset.active), 由于我们在 data.active 属性中设置了偏移百分比，它现在将在 HTML 元素的页面样式中将点击按钮的偏移百分比设置为 HR 的活动变量。

我还添加了一个 justify-content: space-around 到 space 按钮，否则你将不得不使用更多代码来 shorten/enlarge 悬停时的 HR 元素...

注意：点击最后一个按钮会出现某种填充或边距错误，我深表歉意，但我没有时间解决这部分问题，但这可以让您了解如何实现你要的active方法

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    console.log(this.dataset.active)
    document.documentElement.style.setProperty('--active', this.dataset.active )
  });
}

:root {
  --active: 24px;
}

.filterDiv {
  float: left;
  margin: 2px;
  display: none;
}

.btn {
  list-style: none;
  display: inline-block;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
}

hr {
  width: 0.25em;
  left: var(--active);
  width: 12%;
  background-color: purple;
  position: absolute;
  top: .8rem;
  transition: left .3s ease-in-out;
}

.show-all:hover ~ hr {
  left: 24px;
}

.sam:hover ~ hr {
  left: 24%;
}

.jhon:hover ~ hr {
  left: 40%;
}

.rog:hover ~ hr {
  left: 56%;
}

.stv:hover ~ hr {
  left: 70%;
}

.scott:hover ~ hr {
  left: 85%;
}

/* animation duration */

#para {
  animation-duration: 2s;
}

#myBtnContainer {
  display: flex;
  justify-content: space-around;
  overflow-x: none;
  position: relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <title>Document</title>
</head>

<body>

  <h2>Sample</h2>

  <div id="myBtnContainer">
    <li class="btn show-all active" data-active="24px" onclick="filterSelection('all')"> Show&nbsp;all</li>
    <li class="btn sam" data-active="24%" onclick="filterSelection('sam')"> sam</li>
    <li class="btn jhon" data-active="40%" onclick="filterSelection('jhon')"> jhon</li>
    <li class="btn rog" data-active="56%" onclick="filterSelection('rog')"> rog</li>
    <li class="btn stv" data-active="70%" onclick="filterSelection('stv')"> stv</li>
    <li class="btn scott" data-active="85%" onclick="filterSelection('scott')"> scott</li>
    <hr />
  </div>

  <div class="container">
    <div class="filterDiv all w3-container w3-animate-bottom" id="para">
      <h4>what is food</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>

      <h4>lorem ipsum</h4>
      <p> lorem ipsum
      </p>
      <h4>lorem ipsum</h4>
      <p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
    </div>
    <div class="filterDiv sam  w3-container w3-animate-bottom" id="para">
      <h4>lorem ipsum</h4>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
      <h4>What is the Cricket Live Scores API?</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t
      </p>
    </div>

    <div class="filterDiv jhon  w3-container w3-animate-bottom" id="para">
      <h4>lorem ipsum</h4>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
      <h4>lorem ipsum</h4>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
    </div>
    <div class="filterDiv rog  w3-container w3-animate-bottom" id="para">
      <h4>lorem ipsum</h4>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
    </div>
    <div class="filterDiv stv  w3-container w3-animate-bottom" id="para">
      <h4>lorem ipsum
      </h4>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
    </div>
  </div>
</body>


</html>

单击活动时如何删除背景颜色 class

How to remove background color when clicked on active class

html

css

responsive-design

w3.css

data-filtering