Utilisez du CSS pur pour implémenter la fonction de menu de filtre

Dans cet article, nous utiliserons du CSS pur pour obtenir le même effet que le menu de filtres pour bébé de Taobao. Bien que l'exemple ne soit pas aussi puissant que Taobao, le principe est similaire si vous faites des efforts, vous pouvez également obtenir le même. effet comme Taobao. J'espère que cela aide tout le monde.

Le filtrage de contenu est une fonction courante sur le Web, notamment sur les sites de commerce électronique. Il permet aux utilisateurs de filtrer le contenu et d'afficher uniquement le contenu qui répond à leurs exigences. Une capture d'écran peut mieux illustrer cette fonction, comme Taobao :

Comme le montre l'image ci-dessus, l'utilisateur souhaite acheter une robe. Dans toute la liste de produits, il y a trop de produits affichés. Les clientes ne savent pas comment choisir la robe qu'elles souhaitent. Une catégorie est proposée en haut. Les clients sélectionnent les options dont ils ont besoin et les produits qui ne remplissent pas les conditions seront filtrés. Sur la photo ci-dessus, j'ai choisi une jupe "élégante". Bien entendu, vous pouvez choisir davantage de conditions. Je n’en dirai pas plus ici.

Cela dit, dans le passé, pour obtenir un tel effet, il fallait JavaScript (ou plug-in basé sur jquery). Par exemple, l’exemple de filtrage de contenu de CodyHouse. Mais pour un étudiant qui ne comprend pas JavaScript (ne pas comprendre n'est pas une raison), il est en effet difficile d'implémenter une fonction similaire (parfois j'ai une expérience personnelle et j'ai envie de pleurer sans larmes, qui a dit que je n'avais pas étudié dur à le début).

Heureusement, les marionnettes peuvent désormais être implémentées sans JavaScript. En d’autres termes, il n’est pas difficile d’implémenter un filtre de contenu avec des fonctions plus simples utilisant du CSS pur. C'est ce que je souhaite partager avec vous aujourd'hui.

Regardons d'abord un exemple

Regardons d'abord un exemple simple Lorsque la page se charge, les vêtements pour femmes, les vêtements pour hommes et les vêtements pour enfants apparaîtront ensemble. vous effectuez les opérations suivantes Lors du fonctionnement, il y a des effets inattendus :

Lorsque vous cliquez sur le bouton "Vêtements pour femmes", les "Vêtements pour hommes" et "Vêtements pour enfants" seront filtrés

Lorsque vous cliquez le bouton "Vêtements pour hommes", "Les vêtements pour femmes" et les "vêtements pour enfants" seront filtrés

Lorsque vous cliquez sur le bouton "Vêtements pour enfants", les "vêtements pour femmes" et les "vêtements pour hommes" seront filtrés. filtré

Bien sûr, la fonction de ce boîtier n'est pas aussi bonne que Taobao C'est tellement NB, mais Haodai implémente également une fonction similaire au filtrage de contenu.

Principe de mise en œuvre

Le principe de mise en œuvre de cette fonction n'est en réalité pas trop compliqué, mais tout le monde n'y a pas prêté attention. Je peux le résumer sous deux aspects :

Sélecteur puissant

Pour réaliser cette fonction, il s'appuie principalement sur la sélection universelle des frères et sœurs dans le puissant sélecteur CSS Selector (E~F) et sélecteur de pseudo-classe : cochés. Lorsqu'un bouton radio est sélectionné, le contenu des autres catégories est masqué :

input[type="radio"]{
    &[id="men"]:checked {
        ~ .women,
        ~ .children{
            ....
        }
    }
}

Pour contrôler les éléments .women et .children correspondants via le style ci-dessus, vous devez vous assurer que le les éléments sont cohérents avec L'élément d'entrée est un élément frère. C’est également le deuxième point clé qui sera discuté ci-dessous.

Bonne structure adaptée

Utiliser uniquement CSS pour réaliser cette fonction nécessite une structure rigoureuse, car le désordre de la structure affectera directement le effet recherché. C'est aussi son défaut. L'une d'elles consiste à utiliser le bouton radio "radio" pour faire correspondre l'étiquette. Afin d'avoir une belle apparence, si vous ne souhaitez pas afficher , vous devez contrôler la "radio" sélectionnée via l'attribut for du label. Par conséquent, la valeur id de l’entrée doit correspondre à la valeur for de l’étiquette. De plus, les valeurs de nom de toutes les entrées sont les mêmes, indiquant au navigateur qu'elles appartiennent à un groupe. Par exemple :

<input type="radio" id="men" name="clothing" />
<label for="men">男装</label>
<input type="radio" id="women" name="clothing"/>
<label for="women">女装</label>
<input type="radio" id="children" name="clothing"/>
<label for="children">童装</label>
<input type="radio" id="reset" name="clothing"/>
<label for="reset">重置</label>

Étapes de mise en œuvre

Après avoir compris le principe de mise en œuvre, il sera beaucoup plus simple de compléter l'effet de l'exemple au début de l'article.

HTML

La structure HTML est en fait très simple. Il vous suffit de faire attention à la correspondance de l'entrée et de l'étiquette ainsi qu'à l'élément de contenu à filtrer et à son frère. élément. Par exemple, dans cet exemple, il existe trois catégories principales d'éléments de contenu : vêtements pour hommes.hommes, vêtements pour femmes.femmes et vêtements pour enfants.enfants.

<p class="container">
    <!-- 必须保证input和label匹配 -->
    <input type="radio" id="men" name="clothing " />
    <label for="men">男装</label>
    <input type="radio" id="women" name="clothing "/>
    <label for="women">女装</label>
    <input type="radio" id="children" name="clothing "/>
    <label for="children">童装</label>
    <input type="radio" id="reset" name="clothing "/>
    <label for="reset">重置</label>
    <!-- 要被过滤的内容元素需要与input元素是兄弟元素 -->
    <p class="tile men">
        <img src="" alt="">
    </p>
    <p class="tile women">
        <img src="" alt="">
    </p>
    <p class="tile children">
        <img src="" alt="">
    </p>
    <!-- 此处省略N个.men、.women和.children元素 -->
</p>

SCSS

C'est beaucoup plus simple si vous comprenez le principe Regardons d'abord le code global :

body{
  margin:0;
  text-align:center;
  font-family: Verdana;
  background:#f5f5f5;
}
h1 {
  text-align:center;
}
.container {
  width:90%;
  margin:0 auto;
}
input[type="radio"] {
  display:none;
}
label {
  width:23%;
  float:left;
  text-align:center;
  background:#ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  color:#222222;
  padding:0.5%;
  margin:0.5%;
  margin-bottom:30px;
  cursor:pointer;
}
input[type="radio"]{
  &[id="men"]:checked {
    * label {
      background:#6666ff;
    }
    ~ .women,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
  &[id="women"]:checked {
    * label {
      background:#ff4466;
    }
    ~ .men,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
  &[id="children"]:checked {
    * label {
      background:#66dd99;
    }
    ~ .men, 
    ~ .women {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
}
.tile {
  width:23%;
  float:left;
  transition:all 1s;
  margin:0.5%;
  padding:0.5%;
  background:#6666ff;
  img {
      width: 100%;
    }
}

Analysez brièvement ce code de style.

Afin d'améliorer l'apparence de la page, masquez d'abord l' :

input[type="radio"] {
  display:none;
}

Nous utilisons l'attribut for de l'étiquette pour contrôler si le la radio est sélectionnée. Embellissez le style de l'étiquette :

label {
    width:23%;
    float:left;
    text-align:center;
    background:#ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    color:#222222;
    padding:0.5%;
    margin:0.5%;
    margin-bottom:30px;
    cursor:pointer;
}

Le code de style suivant est également la partie la plus critique. Lorsque l'entrée est sélectionnée, le style de l'étiquette :

.

input[type="radio"]{
  &[id="men"]:checked {
      label {
      background:#6666ff;
    }
  }
  ...
}

Le code ci-dessus représente lorsqu'il est sélectionné : coché, son étiquette adjacente change la couleur d'arrière-plan.

Selon l'introduction du principe précédente, nous pouvons savoir que lorsque nous choisissons "Vêtements pour hommes", alors les "Vêtements pour femmes" et "Vêtements pour enfants" doivent être cachés ici par de fausses images, c'est-à-dire. , input[type= "radio"][id="men"] est sélectionné et ses éléments frères similaires .women et .children sont masqués :

input[type="radio"]{
  &[id="men"]:checked {
    ...
    ~ .women,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
}

其他两个选项也是类似的，就不在做过多的阐述。

美化的样式，这里就不说了，大家都懂的。

通过这个过程下来，你就能看到前面DEMO展示的效果了。
总结

本文主要介绍了如何依赖于CSS的属性选择器、通用相邻兄弟选择器和伪类选择器来实现一个简单的Utilisez du CSS pur pour implémenter la fonction de menu de filtre的功能。在整个实例当中，要把握的是严谨的HTML结构，因为相邻兄弟选择器对于结构的依赖程度非常的强。也就是说结构修改之后，你的选择器和样式都要做一定的修改。
相关推荐：

最简洁的CSS学习笔记

全面总结css中属性值继承知识

css和js实现弹出登录居中界面教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!