<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery标签筛选联动选中 - 牛图库素材网</title>
<link href="css/css.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body><div id="content"><br><br><br>
<!--DEMO start-->
<div style="width:510px; height:auto; margin:0px auto;">
    
    
    <div id="name" class="divMain">
        <div class="divClass">分类:</div>
        <a id="aa" class="divSmall" href="?id='aa'" rel="type">裤子1</a>&nbsp;
        <div id="bb" class="divSmall" rel="type">帽子</div>&nbsp;
        <div id="cc" class="divSmall" rel="type">衣服</div>&nbsp;
        <div id="dd" class="divSmall" rel="type">鞋子</div>&nbsp;
        <div id="ff" class="divSmall" rel="type">手机</div>&nbsp;
    </div>

    <div id="dongzuo" class="divMain">
        <div class="divClass">价格:</div>
        <div id="have" class="divSmall" rel="sprice">10-100块</div>
        <div id="no" class="divSmall" rel="sprice">100以上</div>
    </div>

    <div id="result" class="divMain">
        <div class="divClass" rel="decoration">品牌:</div>
        <div id="smart" class="divSmall" rel="decoration">帅气</div>
        <div id="clever" class="divSmall" rel="decoration">英俊</div>
        <div id="th" class="divSmall" rel="decoration">潇洒</div>
        <div id="mamazhi" class="divSmall" rel="decoration">妈妈织</div>
    </div>
<div id="mainSelect" class="divMain">
<span style="float:left">您已选择:</span>
<?php
if(isset($_GET['id']))
{$id=$_GET['id'];echo $id;
if($id=='aa')
{
echo "裤子";
}
else
{
echo "不是裤子";
}}?>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".divSmall").click(function () {
                var isAlreadyHave = false;
                var thisID = $(this).attr("id");
                var classType = $(this).attr("rel")
                $(".divSmall2").each(function () {
                    if ($(this).attr("rel") == thisID) {
                        isAlreadyHave = true;
                    }
                    if ($(this).attr("ttype") == classType) {
                        goBegin($(this).attr("rel"));
                        $(this).remove();
                    }
                });
                if (!isAlreadyHave) {
                    $(this).css("background-color", "#FFA500");
                    writeDiv($(this).html(), $(this).attr("id"), $(this).attr("rel"));
                }
            });
            $(".image").live('click', function () {
                goBegin($(this).parent().attr("rel"));
                $(this).parent().remove();
            });
        });
        //输出一个div
        function writeDiv(name, id, classONE) {
           // var divShow = "<div class='divSmall2' id='"+id+"' href='"+href+"' rel='" + id + "' ttype='"+ classONE+"'>" + name + "<img src='image/close.gif' class='image' /></div>";
   
var divShow = "<a class='divSmall2' id='"+id+"' rel='" + id + "'herf='index.php?id="+id+"' ttype='"+ classONE+"'>" + name + "<img src='image/close.gif' class='image' /></a>";
            $("#mainSelect").html($("#mainSelect").html() + divShow);
        }
        function goBegin(ID) {
            $("#" + ID).css("background-color", "#FFFFFF");
        }
    </script>
<!--DEMO end--> </div></body>
</html>PHP筛选