<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script src="js/jquery.min.js"></script>
<style>
/*初始化*/
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: #666666;
}
body,p,ul,li,h1,h2,h3,h4,input,dd,tr,i{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
font-family: Arial,"microsoft yahei";
}
.main{
width: 1200px;
margin: 0 auto;
}
a img{
border:none;
}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
/*篩選*/
.filter-title{
line-height: 36px;
height: 36px;
background: #f1f1f1;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 0 10px;
margin-bottom: 10px;
}
.filter-title span:first-child{
color: #f42121;
padding-right: 5px;
}
.filter-title span:nth-child(2){
color: #999;
padding-left: 20px;
}
.filter-title i.fa-angle-right{
padding-left: 5px;
font-size: 18px;
}
.filter-title button{
line-height: 24px;
height: 24px;
padding: 0 10px;
border: none;
outline: medium;
color: #fff;
}
.filter-title button.filter-btn{
background: #F42121;
margin-left: 20px;
}
.filter-title button.empty-btn{
background: #aaa;
}
.filter-title a{
border: 1px solid #ddd;
color: #666;
display: inline-block;
line-height: 24px;
padding: 0 10px;
background: #fff;
margin-right: 5px;
}
.filter-title a i{
padding-left: 5px;
}
.filter-title a:hover{
border-color: #F42121;
}
.filter-title a:hover i{
color: #F42121;
}
.filter-item{
border-bottom: 1px dashed #ddd;
padding-top: 5px;
}
.filter-item:last-child{
border-bottom: none;
}
.filter-left{
width: 80px;
float: left;
}
.filter-center{
width: 1120px;
float: left;
padding-bottom: 5px;
}
.filter-center ul{
max-height: 84px;
}
.filter-center li{
float: left;
text-align: center;
background: #fff;
}
.filter-center li a{
display: block;
overflow: hidden;
line-height: 34px;
padding: 0 15px;
height: 34px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //文本行數
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid #ddd;
margin: 3px;
}
.filter-center li a:hover,.filter-center li a.active{
color: #F42121;
border-color: #F42121;
}
</style>
</head>
<body>
<div class="filter-box main">
<div class="filter-title">
<span>水泥</span>
已選<i class="fa fa-angle-right"></i>
<span class="filter-con">
<!--<a href="javascript:;">伊卡璐<i class="fa fa-times"></i></a>-->
</span>
<button class="filter-btn">篩選</button>
<button id="empty" class="empty-btn">全部清空</button>
</div>
<div>
<div class="filter-item clearfloat">
<div class="filter-left">品牌：</div>
<div class="filter-center">
<ul class="clearfloat">
<li>
<a href="javascript:;">華潤1</a>
</li>
<li>
<a href="javascript:;">華潤2</a>
</li>
<li>
<a href="javascript:;">華潤3</a>
</li>
</ul>
</div>
</div>
<div class="filter-item clearfloat">
<div class="filter-left">規格：</div>
<div class="filter-center">
<ul class="clearfloat">
<li>
<a href="javascript:;">規格1</a>
</li>
<li>
<a href="javascript:;">規格2</a>
</li>
<li>
<a href="javascript:;">規格3</a>
</li>
</ul>
</div>
</div>
<div class="filter-item clearfloat">
<div class="filter-left">測試：</div>
<div class="filter-center">
<ul class="clearfloat">
<li>
<a href="javascript:;">規格1</a>
</li>
<li>
<a href="javascript:;">規格2</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--篩選-->
<script>
$(function(){
/*點擊品類*/
$(".filter-item .filter-center a").click(function(){
$(this).parent("li").siblings().children("a").removeClass("active");
$(this).addClass("active");
$(".filter-title .filter-con").empty();
$(".filter-item .filter-center a.active").each(function(){
var txt=$(this).text();
var title=$(this).parents(".filter-center").prev(".filter-left").text();
var html="<a href='javascript:;'>"+title+txt+"<i class='fa fa-times'></i></a>";
$(".filter-title .filter-con").append(html);
deleteOne();
})
})
//全部清空
$("#empty").click(function(){
$(".filter-title .filter-con").empty();
$(".filter-item .filter-center a").removeClass("active");
})
//刪除某個
function deleteOne(){
$(".filter-title .filter-con a").click(function(){
var tip=$(this).text().substring(0,3);
$(".filter-item .filter-left").each(function(){
if($(this).text()==tip){
$(this).parent(".filter-item").children(".filter-center").find("a").removeClass("active");
}
})
$(this).remove();
})
}
})
</script>
</body>
</html>
jquery實現篩選商品效果，每個種類只能選擇一個
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
kubeconfig 多個集羣配置 如何切換
kubectl config get-contexts kubectl config use-context <context-name> kubectl config current-context