文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我如何在我的代码中让这个过滤器工作？

问我如何在我的代码中让这个过滤器工作？
EN

Stack Overflow用户
提问于 2021-10-24 20:10:29
回答 1查看 57关注 0票数 2

我一直在试图弄清楚如何在我的代码中使用这个过滤器，如果用户单击一个类别按钮，则只显示与该单词相关联的框。如果html文件中按钮所在的块周围没有标记，那么它就会起作用，但是一旦我在这些按钮标记块周围加上div标记来设置样式，过滤器就会停止工作。我需要能够样式的按钮，并把它的div标签。有没有办法让这个过滤器在不工作的html代码中工作，同时将form和filter /product div标签放在按钮块周围？

此外，我只被允许使用CSS和HTML，(没有JAVASCRIPT)

所以这里是有问题的代码块：

代码语言：javascript
复制
  <div class="contains">
    <div class="filters">
      <div class="product">
        <form action="" class="forms">
          <h3>Filters</h3>
          <button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
          <button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
          <button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
          <button class="filter-btn" data-filter="*" tabindex="-1">All</button>
        </form>
      </div>
    </div>
 <!-- (other div classes representing categories) -->
 </div>

怎样才能让这个过滤器在div标签中工作呢？

如果需要，下面是两个完整运行代码的版本作为参考。

正常工作的html文件的代码，类别按钮块周围没有div标记：

​

代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.contains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

button[data-filter="warm"]:focus~div:not([class*="warm"]) {
  display: none;
}

button[data-filter="cold"]:focus~div:not([class*="cold"]) {
  display: none;
}

button[data-filter="toxic"]:focus~div:not([class*="toxic"]) {
  display: none;
}

.contains .filters {
  flex-basis: 100%;
}

.product {
  padding: 15px 35px;
}

.forms {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 300px;
  padding: 30px 20px;
  background: blue;
  color: #fff;
}

.filter-btn {
  display: block;
  margin-left: auto;
  margin-bottom: 1rem;
  background: white;
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="helpstyle.css">
  <title>Animal types</title>
</head>

<body>
  <div class="contains">
    <h3>Filters</h3>
    <button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
    <button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
    <button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
    <button class="filter-btn" data-filter="*" tabindex="-1">All</button>
    <div class="warm">
      <div class="product">
        <form action="" class="forms">
          warm
        </form>
      </div>
    </div>
    <div class="warm cold">
      <div class="product">
        <form action="" class="forms">
          warm cold
        </form>
      </div>
    </div>
    <div class="warm toxic">
      <div class="product">
        <form action="" class="forms">
          warm toxic
        </form>
      </div>
    </div>
    <div class="toxic">
      <div class="product">
        <form action="" class="forms">
          toxic
        </form>
      </div>
    </div>
    <div class="toxic cold">
      <div class="product">
        <form action="" class="forms">
          toxic cold
        </form>
      </div>
    </div>
    <div class="cold">
      <div class="product">
        <form action="" class="forms">
          cold
        </form>
      </div>
    </div>
  </div>
</body>

</html>

​

不工作的html文件的代码，在我需要工作的按钮块周围有div标签：

​

代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.contains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

button[data-filter="warm"]:focus~div:not([class*="warm"]) {
  display: none;
}

button[data-filter="cold"]:focus~div:not([class*="cold"]) {
  display: none;
}

button[data-filter="toxic"]:focus~div:not([class*="toxic"]) {
  display: none;
}

.contains .filters {
  flex-basis: 100%;
}

.product {
  padding: 15px 35px;
}

.forms {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 300px;
  padding: 30px 20px;
  background: blue;
  color: #fff;
}

.filter-btn {
  display: block;
  margin-left: auto;
  margin-bottom: 1rem;
  background: white;
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="helpstyle.css">
  <title>Animal types</title>
</head>
<body>
  <div class="contains">
    <div class="filters">
      <div class="product">
        <form action="" class="forms">
          <h3>Filters</h3>
          <button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
          <button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
          <button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
          <button class="filter-btn" data-filter="*" tabindex="-1">All</button>
        </form>
      </div>
    </div>
    <div class="warm">
      <div class="product">
        <form action="" class="forms">
          warm
        </form>
      </div>
    </div>
    <div class="warm cold">
      <div class="product">
        <form action="" class="forms">
          warm cold
        </form>
      </div>
    </div>
    <div class="warm toxic">
      <div class="product">
        <form action="" class="forms">
          warm toxic
        </form>
      </div>
    </div>
    <div class="toxic">
      <div class="product">
        <form action="" class="forms">
          toxic
        </form>
      </div>
    </div>
    <div class="toxic cold">
      <div class="product">
        <form action="" class="forms">
          toxic cold
        </form>
      </div>
    </div>
    <div class="cold">
      <div class="product">
        <form action="" class="forms">
          cold
        </form>
      </div>
    </div>
  </div>
</body>

</html>

​

谢谢，非常感谢你的帮助。

html
css
EN

回答 1

Stack Overflow用户

发布于 2021-10-24 21:30:35

它不能在你的第二个代码块中工作的原因是你的CSS依赖于~的“一般兄弟”选择器，这需要have the same parent的两个有问题的元素。据我所知，没有CSS选择器可以让你说“如果这个与无关的元素有焦点，就对这个元素应用一个样式”。

我会使用Javascript来实现这种动态行为。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69700381

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档