本文我們來用純css實現像淘寶寶貝篩選菜單那樣的效果，例子雖然沒有淘寶那樣強大，不過原理差不多，如果花點心思也可以實現和淘寶一樣的。希望能幫助大家。
內容過濾是Web上常見的功能，特別是在電商網站，為了讓使用者過濾內容，只顯示符合自己的要求的內容。截張圖來說，能更好的說明這樣的功能，例如淘寶網：
#
##如上圖所示，使用者想購買一件裙子，在整個產品清單中，顯示的產品數量太多了。顧客不知道如何選擇自己所需的裙子。在頂部提供了一個分類，顧客選擇需要的選項，產品中就會過濾掉不符合條件的產品。上圖選擇了」氣質優雅「的裙子。當然還可以選擇更多的條件。這裡就不我多說了。 話說回來，以前實現這樣一個效果都需要藉助於JavaScript(或基於jquery插件)來做。例如CodyHouse的內容過濾範例。但對於一枚不懂JavaScript的同學來說(不懂不是理由)，要實現類似的一個功能，的確是一件難事(偶有切身體會，欲哭無淚，誰叫當初沒好好讀書)。
所幸的事，如今天偶也可以不借助JavaScript來實現。也就是純CSS來實作一個功能簡單一點的內容過濾器，不是難事。這也是今天要跟大家分享的。
先來看一個範例
先來看一個簡單的範例，頁面載入時，會有女裝、男裝和童裝一起出現，當你做下面的操作時，有意想不到的效果：
當你點擊”女裝“按鈕時，”男裝“和”童裝“都會被過濾掉當你點擊”男裝“按鈕時，”女裝「和」童裝「都會被過濾掉
當你點擊」童裝「按鈕時，」女裝「和」男裝「都會被過濾掉
當然這個案例的功能沒有淘寶網的那麼NB，但好待也是完成了一個類似內容過濾的功能。
實作原理
實現這個功能的原理其實不太複雜，只是大家平常並未註意過。我歸納起來就是兩個方面：
強大的選擇器
#實現這個功能，主要依賴強大的CSS選擇器中的通用兄弟選擇器(E~F)和偽類選擇器:checked。當某個單選按鈕選取時，其他類別的內容隱藏起來：
1 2 3 4 5 6 7 8 | input[type="radio"]{
&[id="men"]:checked {
~ .women,
~ .children{
....
}
}
}
|
登入後複製
要透過上面樣式來控制對應的.women和.children元素，必須保證元素與input元素是兄弟元素。這也是下面要說的第二個關鍵之處。
好、相符的結構
只利用CSS來製作這個功能，需要有嚴謹的結構，因為結構的錯亂直接會影響到需要的效果。這也是其中不足之處。其中之一就是藉助單選按鈕」radio「和label匹配。為了外觀的好看，不想顯示，需要透過label的for屬性來控制選取的」radio「。所以input的id值要跟label的for值相符。另外所有的input的name值一樣，告訴瀏覽器，他們是屬於一組的。如：
1 2 3 4 5 6 7 8 | <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>
|
登入後複製
實作步驟
了解實作原理之後，要完成文章開頭範例的效果就簡單的多了。
HTML
HTML結構其實非常簡單，只需要注意input和label的匹配以及將要過濾內容元素與其是兄弟元素。比如此例，內容元素主要有三類：男裝.men、女裝.women和童裝.children。
######
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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="/static/imghw/default1.png" data-src="" alt=" class="lazy" alt="">
</p>
<p class="tile women">
<img src="/static/imghw/default1.png" data-src="" alt=" class="lazy" alt="">
</p>
<p class="tile children">
<img src="/static/imghw/default1.png" data-src="" alt=" class="lazy" alt="">
</p>
<!-- 此处省略N个.men、.women和.children元素 -->
</p>
|
登入後複製
###SCSS######明白原理，就簡單多了，首先來看整體的程式碼：#########
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 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%;
}
}
|
登入後複製
###簡單的解析一下這個樣式程式碼。 ######為了頁面好看，首先把
隱藏掉：#########
1 2 3 | input[type="radio"] {
display:none;
}
|
登入後複製
###我們透過label的for屬性來控制radio有沒有選取。美化label樣式：#########
1 2 3 4 5 6 7 8 9 10 11 12 | 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選取之後label的樣式：#########
1 2 3 4 5 6 7 8 | input[type="radio"]{
&[id="men"]:checked {
label {
background:#6666ff;
}
}
...
}
|
登入後複製
###上面的程式碼表示的是
選擇中:checked時，其相鄰的label改變背景顏色。 ######根據前面的原理介紹，可以得知，當我們選擇了」男裝“，那麼”女裝“和”童裝“就需要隱藏，在這裡通過假像來隱藏，也就是input[type= "radio"][id="men"]選中，其相通兄弟元素.women和.children隱藏掉：#########
1 2 3 4 5 6 7 8 9 10 11 12 13 | input[type="radio"]{
&[id="men"]:checked {
...
~ .women,
~ .children {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;
}
}
}
|
登入後複製
其他两个选项也是类似的，就不在做过多的阐述。
美化的样式，这里就不说了，大家都懂的。
通过这个过程下来，你就能看到前面DEMO展示的效果了。
总结
本文主要介绍了如何依赖于CSS的属性选择器、通用相邻兄弟选择器和伪类选择器来实现一个简单的用純CSS實現篩選選單功能的功能。在整个实例当中，要把握的是严谨的HTML结构，因为相邻兄弟选择器对于结构的依赖程度非常的强。也就是说结构修改之后，你的选择器和样式都要做一定的修改。
相关推荐：
最简洁的CSS学习笔记
全面总结css中属性值继承知识
css和js实现弹出登录居中界面教程
以上是用純CSS實現篩選選單功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
