<!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>
<div id="bb" class="divSmall" rel="type">帽子</div>
<div id="cc" class="divSmall" rel="type">衣服</div>
<div id="dd" class="divSmall" rel="type">鞋子</div>
<div id="ff" class="divSmall" rel="type">手机</div>
</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筛选
<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>
<div id="bb" class="divSmall" rel="type">帽子</div>
<div id="cc" class="divSmall" rel="type">衣服</div>
<div id="dd" class="divSmall" rel="type">鞋子</div>
<div id="ff" class="divSmall" rel="type">手机</div>
</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筛选
解决方案 »
- 请问php如何实现按js日历插件获取的日期查询oracle数据库
- XML标签语法错误 : name="list" id="vo" 请教!!!!!
- 新手问题,php怎么发送电子邮件?
- 短域名写cookie的问题
- [求助]使用php读取文件/引入其他页面内容的问题
- PHP如何连接远程数据库?
- [php] str_replace函數問題
- [求救]php+2003配置的问题
- 关于定时刷票的一个算法问题
- 想做一个连线题那种的试卷。存储方式 问题pic1_name2|pic2_name1| 答案 pic1_name1|pic2_
- 如何使用BBCode代码?以及如何安全地使用?
- php 中怎么实现低权限添加的数据要通过高权限的审核才能通过添加呢.....给点思路
改为
<a id="aa" class="divSmall" href="?id=aa" rel="type">裤子1</a>