微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

如何解决单击活动类时如何删除背景颜色

    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,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>

Image clicked from my phone

以上截图来自我的手机。

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

Desired Result

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

解决方法

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

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

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

:root {
  --active: 24px;
}

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

  left: var(--active);

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

我还添加了一个 justify-content: space-around 以将按钮等距分开，否则您将不得不使用更多代码来缩短/放大悬停时的 HR 元素...

注意：单击最后一个按钮时会出现某种填充或边距故障，我深表歉意，但我没有时间解决该部分，但这使您对如何进行操作有一个很好的了解实现您正在寻找的主动方法。

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,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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot