京东商城网里面的一个功能，请大家先看看。。
http://www.360buy.com/products/670-671-672-0-1340-0-0-0-0-0-1-1-1.html怎样做每次点击时背景颜色都改变？？？
并且每一行的每一列都互斥???每一行之间也互斥？？？
http://www.360buy.com/products/670-671-672-0-1340-0-0-0-0-0-1-1-1.html怎样做每次点击时背景颜色都改变？？？
并且每一行的每一列都互斥???每一行之间也互斥？？？
用div或者别的什么区分一下
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title></title>
<style type="text/css">
.class1{
background:#efefef;
text-align:center;
width:80px;
}
.class2{
background: #ffcc00;
text-align:center;
width: 80px;
}
.class3{
background: #ffffff;
}
.class4{
background: #ffff00;
}
</style>
<script type="text/javascript">
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
} function initTd(){
var sections=document.getElementsByTagName("td");
for(var i=0;i<sections.length;i++){
var section=sections[i];
if(section.getAttribute("t")=="yes"){
section.className="class1";
section.nextSibling.className="class3";
addEvent(section,"click",changeTd);
}
}
} function changeTd(ev){
var ev=ev||window.event;
var evt=ev.srcElement||ev.target;
if(evt.tagName=="TD"&&evt.getAttribute("t")=="yes"){
var sections=document.getElementsByTagName("td");
for(var i=0;i<sections.length;i++){
var section=sections[i];
if(section.getAttribute("t")=="yes"){
section.className="class1";
section.nextSibling.className="class3";
evt.className="class2";
evt.nextSibling.className="class4";
}
}
}
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1" bordercolor="#cccccc" style="border-collapse:collapse" align="center" width="300">
<tr><td t="yes">a</td><td>this is section a</td></tr>
<tr><td t="yes">b</td><td>this is section b</td></tr>
<tr><td t="yes">c</td><td>this is section c</td></tr>
<tr><td t="yes">d</td><td>this is section d</td></tr>
</table>
<script type="text/javascript">
initTd();
</script>
</body>
</html>
http://www.360buy.com/products/670-671-672-0-1346-0-0-0-0-0-1-1-1.html
再看看其中一个变色的link的HTML
<a class="curr" href="670-671-672-0-1346-0-0-0-0-0-1-1-1.html" id="1346">5000-5999</a>
应该是处理了一下url的670-671-672-0-1346-0-0-0-0-0-1-1-1这段字串
将相应的id的a的Style改变，如上id为1346的a。
先添加一个<input type="hidden" runat="server" id="hidType" value="" />
超链接点击后先改变样式-->保存点击的值到hidType中-->在Js中调用__dopostback方法，然后后台获取保存的值，然后作为参数进入数据库查询。
这个是我写的一个站。。其实这个很简单，就是根据不同的参数判断下该选中哪个。然后控制下css样式就行了
定义2个样式 red 跟 black
动态的5个repeter 循环出来n个linkbutton
初始化的时候 5个repeter 都找到第一个linkbutton 使他的CssClass='red'
然后点击每一个linkbutton的 command事件里让全部的linkbutton.cssClass='black'
当前的 (e as linkbutton).cssClass='red'
我说的你明白?
这个可能性应该比较小吧？？我说说我的理由:1，这个栏目里面的种类比较多，并且是组合查询，如果是早就生成好的html静态页的话，那这个html静态页未免也太多了吧？？？更何况这只是其中的一个小类——笔记本。理论上还有小类成千上万……
2，实在是不好描述，感觉比较自己的想法前后矛盾，冲突的地方比较多。。
3，…………
你用的是类似GridView的.net控件repeter 吗？？
你说的我需要从头再想想，开始感觉不错，不知道后面的业务逻辑好不好实现，先谢谢了。。
每一行点击的单元格设置一个ID，其它的清楚ID，就有这个效果了！
.red{border:solid 1px #c0c0c0;background-color:#c0c0c0;font-size:12px;}
.div{width:100%;border:solid 1px #c0c0c0;padding-left:10px;padding-top:10px;float:left}
</style>
<form id="form1" runat="server">
<div class="div">
<asp:Repeater runat="server" ID="rep_1">
<ItemTemplate>
<asp:LinkButton runat="server" ID="l1" Text="测试" OnCommand="com1"></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="div">
<asp:Repeater runat="server" ID="rep_2">
<ItemTemplate>
<asp:LinkButton runat="server" ID="l1" Text="测试" OnCommand="com2"></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="div">
<asp:Repeater runat="server" ID="rep_3">
<ItemTemplate>
<asp:LinkButton runat="server" ID="l1" Text="测试" OnCommand="com3"></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
后台protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
System.Data.DataTable dt = DAL.DbHelperSQL.ExecuteDt("select * from XT_TD_News");
rep_1.DataSource = dt;
rep_2.DataSource = dt;
rep_3.DataSource = dt;
rep_1.DataBind();
rep_2.DataBind();
rep_3.DataBind();
(rep_1.Items[0].FindControl("l1") as LinkButton).CssClass="red";
//这个是设置全部默认选择的样式我只写了一个
}
}
protected void com1(object o, CommandEventArgs e)
{
for (int i = 0; i < rep_1.Items.Count; i++)
{
LinkButton l = rep_1.Items[i].FindControl("l1") as LinkButton;
l.CssClass = "";
}
(o as LinkButton).CssClass = "red";
}
protected void com2(object o, CommandEventArgs e)
{
for (int i = 0; i < rep_2.Items.Count; i++)
{
LinkButton l = rep_2.Items[i].FindControl("l1") as LinkButton;
l.CssClass = "";
}
(o as LinkButton).CssClass = "red";
}
protected void com3(object o, CommandEventArgs e)
{
for (int i = 0; i < rep_3.Items.Count; i++)
{
LinkButton l = rep_3.Items[i].FindControl("l1") as LinkButton;
l.CssClass = "";
}
(o as LinkButton).CssClass = "red"; }
还有 你要实现的是筛选功能 每次点击的时候 也就是在comm里 改变1=1 where 后面的条件就可以了
这个你可以通过e.CommandArgument 或者e.CommandName来弄
真是谢谢你了，互斥的问题解决了。。
我还继续努力，实现所有效果repeter好久没有用过了，今天晚上回去好好检讨检讨。。非常感谢！！！
嘿嘿，你好像没有看清楚我的帖子，不管是什么动态静态，最后都会生成html返回到客户端
上面我已经说了我不认为是静态的理由努力！！！
那动态的给sql语句的条件赋值 如何弄?
学习......
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0; font-size:13px;}
body {background:#fff;font-size:13px;font-family:宋体,Verdana;color:#666;height:100%; width:100%}
dd div a{margin-left:10px;}
a:link {color: #000;text-decoration: none;}
a:visited {color: #666;text-decoration: none;}
a:hover {text-decoration: none;color: #F00; }
a:active {text-decoration: none;}
#current{background:blue; color:red;}
</style>
</head>
<body>
<div style="width:600px; height:auto; margin:50px auto; border:1px solid #ddd">
<h1>笔记本</h1><strong> - 商品筛选</strong>
<div id="select" >
<dl >
<dt>品牌：</dt>
<dd>
<div>
<a>全部</a>
<a>联想（ThinkPad）</a>
<a>联想（Lenovo）</a>
<a>惠普（hp）</a>
<a>宏碁（acer）</a>
</div>
</dd>
<dt>价格：</dt>
<dd>
<div>
<a>全部</a>
<a>3000-3999</a>
<a>4000-4999</a>
<a>5000-5999</a>
<a>6000-6999</a>
</div>
</dd>
<dt>尺寸：</dt>
<dd>
<div>
<a>全部</a>
<a>11英寸</a>
<a>12英寸</a>
<a>14英寸</a>
<a>15英寸</a>
</div>
</dd>
</dl>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function()
{
var divSelect = document.getElementById("select");
var ddList = divSelect.getElementsByTagName("dd");
var aList=[] ;
var url = document.location.href;
var index = url.indexOf("p=");
var fileName="多条件搜索显示效果.htm?p="; // 当前相对url + "p="
var p ;
if(index>0){p=url.substr(index+2); }
p= p? p.split('-'):[0,0,0];
for(var i=0;i< ddList.length;i++)
{
aList.push( ddList[i].getElementsByTagName("a"));
aList[i][p[i]?p[i]:0].id="current";
}
for(var i=0;i< aList[0].length;i++) // 品牌 链接
{
aList[0][i].href = fileName + i +'-'+ (p[1]?p[1]:0)+'-'+ (p[2]?p[2]:0);
}
for(var i=0;i< aList[1].length;i++) // 价格 链接
{
aList[1][i].href = fileName + (p[0]?p[0]:0)+'-'+ i +'-'+ (p[2]?p[2]:0);
}
for(var i=0;i< aList[2].length;i++) // 尺寸 链接
{
aList[2][i].href = fileName +(p[0]?p[0]:0)+'-'+ (p[1]?p[1]:0)+'-'+ i ;
}
}
</script>
</html>
用<asp:LinkButton runat="server" ID="l1" Text="测试" OnCommand="com1"></asp:LinkButton>
绑定好像没有用啊？？
String where=" where 1=1 ";if()
{where +=" and XXX";}
if()
{where +=" and YYY";}
if()
{where +=" and DDD";}
<!--jquery实现-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>changeBackgroundColor</title>
<style>
li{list-style-type:none;float:left;cursor:pointer;margin-right:10px;}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").click(function(){
$("li").each(function(){
$(this).css({"background":"","color":"black"});
})
$(this).css({"background":"lightblue","color":"white"});
})
})
</script>
</head>
<body>
<ul>
<li>全部</li>
<li>1－2999</li>
<li>3000-3999</li>
<li>4000-4999</li>
<li>5000-5999</li>
<li>6000-6999</li>
<li>7000-7999</li>
<li>8000-9999</li>
<li>10000-12999</li>
</ul>
</body>
</html>
例如：
<style type="text/css">
.a_bg
{
background-color:#ccc;
}</style>
<script type="text/javascript">
$(function{
$("a").hover(function(){
$(this).toggleClass("a_bg");
}
);
$("a").click(function(){
$(this).addClass("a_bg");
});
})
</script><ul>
<li><a class="a_bg" href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
</ul>
<ul>
<li><a href="#">test6</a></li>
<li><a href="#">test7</a></li>
<li><a class="a_bg" href="#">test8</a></li>
<li><a href="#">test9</a></li>
<li><a href="#">test10</a></li>
</ul>
<ul>
<li><a href="#">test11</a></li>
<li><a href="#">test12</a></li>
<li><a href="#">test13</a></li>
<li><a href="#">test14</a></li>
<li><a class="a_bg" href="#">test15</a></li>
</ul>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0; font-size:13px;}
body {background:#fff;font-size:13px;font-family:宋体,Verdana;color:#666;height:100%; width:100%}
dd div a{margin-left:10px;}
a:link {color: #000;text-decoration: none;}
a:visited {color: #666;text-decoration: none;}
a:hover {text-decoration: none;color: #F00; }
a:active {text-decoration: none;}
#current{background:blue; color:red;}
</style>
</head>
<body>
<div style="width:600px; height:auto; margin:50px auto; border:1px solid #ddd">
<h1>笔记本</h1><strong> - 商品筛选</strong>
<div id="select" >
<dl >
<dt>品牌：</dt>
<dd>
<div>
<a>全部</a>
<a>联想（ThinkPad）</a>
<a>联想（Lenovo）</a>
<a>惠普（hp）</a>
<a>宏碁（acer）</a>
</div>
</dd>
<dt>价格：</dt>
<dd>
<div>
<a>全部</a>
<a>3000-3999</a>
<a>4000-4999</a>
<a>5000-5999</a>
<a>6000-6999</a>
</div>
</dd>
<dt>尺寸：</dt>
<dd>
<div>
<a>全部</a>
<a>11英寸</a>
<a>12英寸</a>
<a>14英寸</a>
<a>15英寸</a>
</div>
</dd>
</dl>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function()
{
var divSelect = document.getElementById("select");
var ddList = divSelect.getElementsByTagName("dd");
var aList=[] ;
var url = document.location.href;
var index = url.indexOf("p=");
var fileName="多条件搜索显示效果.htm?p="; // 当前相对url + "p="
var p ;
if(index>0){p=url.substr(index+2); }
p= p? p.split('-'):[0,0,0];
for(var i=0;i< ddList.length;i++)
{
aList.push( ddList[i].getElementsByTagName("a"));
aList[i][p[i]?p[i]:0].id="current";
}
for(var i=0;i< aList[0].length;i++) // 品牌 链接
{
aList[0][i].href = fileName + i +'-'+ (p[1]?p[1]:0)+'-'+ (p[2]?p[2]:0);
}
for(var i=0;i< aList[1].length;i++) // 价格 链接
{
aList[1][i].href = fileName + (p[0]?p[0]:0)+'-'+ i +'-'+ (p[2]?p[2]:0);
}
for(var i=0;i< aList[2].length;i++) // 尺寸 链接
{
aList[2][i].href = fileName +(p[0]?p[0]:0)+'-'+ (p[1]?p[1]:0)+'-'+ i ;
}
}
</script>
</html>
1.这是一个比较重要的功能，所以应该尽量放到后台去做，就像是DIV+CSS布局中的一条规律——这是一个比较重要的样式，所以尽量不要使用“高级选择器”——有些浏览器不支持样式高级选择器。
2.可以解决面试官说入宫用户禁用了js呢?（个人觉得这是一个变态的问题，现在基于js的东西实在是太多了，各种浏览器也都基本上支持了js——虽然兼容性还有点问题，但是有很多好的js库可以解决兼容性问题。如果说现在浏览器都不支持js，后果无法想象……）
3.个人技术有限，能想到的方法是——在前台放置一个LinkButton服务器控件，隐藏起来，主要的用处是LinkButton服务器控件可以生成__doPostBack（双划线）的js方法，即使是HTML标签调用此方法一样可以提交该页面，可以通过下面后台代码获取筛选条件的方法在前台获取，放置到前台的一个隐藏域里面，后台同样可以获取。（主要因为这种方法不熟悉，不知道能不能做到，自己没有试过。）
以下是后台代码，唯一的遗憾是需要在三个不同的LinkButton里面分别放一个不同的OnCommand属性，如果可以将这些可以综合在一起就好了——因为筛选的条件可能增加——意味着后面还需要添加protected void com3(object o, CommandEventArgs e){ }等方法。public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
System.Data.DataTable dt = GetDataTable();
rep_1.DataSource = dt;
rep_2.DataSource = dt;
rep_3.DataSource = dt;
rep_1.DataBind();
rep_2.DataBind();
rep_3.DataBind();
(rep_1.Items[0].FindControl("l1") as LinkButton).CssClass = "red";
(rep_2.Items[0].FindControl("l1") as LinkButton).CssClass = "red";
(rep_3.Items[0].FindControl("l1") as LinkButton).CssClass = "red";
Response.Write(GetParames());
//这个是设置全部默认选择的样式我只写了一个
}
}
protected void com1(object o, CommandEventArgs e)
{
for (int i = 0; i < rep_1.Items.Count; i++)
{
LinkButton l = rep_1.Items[i].FindControl("l1") as LinkButton;
l.CssClass = "";
}
(o as LinkButton).CssClass = "red";
Response.Write(GetParames());
} protected void com2(object o, CommandEventArgs e)
{
for (int i = 0; i < rep_2.Items.Count; i++)
{
LinkButton l = rep_2.Items[i].FindControl("l1") as LinkButton;
l.CssClass = "";
}
(o as LinkButton).CssClass = "red";
Response.Write(GetParames());
} protected void com3(object o, CommandEventArgs e)
{
for (int i = 0; i < rep_3.Items.Count; i++)
{
LinkButton l = rep_3.Items[i].FindControl("l1") as LinkButton;
l.CssClass = "";
}
(o as LinkButton).CssClass = "red";
Response.Write(GetParames()); } private DataTable GetDataTable()
{
string connectionString = "server=.;database=dbuser;uid=sa;pwd=000000";
SqlConnection conn = new SqlConnection(connectionString);
string sqlString = "select * from info";
SqlDataAdapter caChe = new SqlDataAdapter(sqlString, conn);
DataSet ds = new DataSet();
caChe.Fill(ds);
return ds.Tables[0];
}
//获取筛选条件
private string GetParames()
{
string parms = "";
foreach (Control c in panMain.Controls)
{
if (c is Repeater)
{
Repeater p = c as Repeater;
for (int i = 0; i < p.Items.Count; i++)
{
LinkButton lb = p.Items[i].FindControl("l1") as LinkButton;
if (lb.CssClass == "red")
{
parms += (lb.FindControl("l1") as LinkButton).Text;
}
}
}
}
return parms;
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
.red{border:solid 1px #c0c0c0;background-color:#c0c0c0;font-size:12px;}
.div{width:100%;border:solid 1px #c0c0c0;padding-left:10px;padding-top:10px;float:left}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="panMain" runat="server">
<div class="div">
<asp:Repeater runat="server" ID="rep_1">
<ItemTemplate>
<asp:LinkButton runat="server" ID="l1" Text='<%# Eval("UserName") %>' CommandName="com1" OnCommand="com1" CommandArgument='<%# Eval("UserName") %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="div">
<asp:Repeater runat="server" ID="rep_2">
<ItemTemplate>
<asp:LinkButton runat="server" ID="l1" Text='<%# Eval("UserName") %>' CommandName="com2" OnCommand="com2" CommandArgument='<%# Eval("UserName") %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="div">
<asp:Repeater runat="server" ID="rep_3">
<ItemTemplate>
<asp:LinkButton runat="server" ID="l1" Text='<%# Eval("UserName") %>' CommandName="com3" OnCommand="com3" CommandArgument='<%# Eval("UserName") %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
</asp:Panel>
</form>
</body>
</html>
然后调用一个command 通过e.CommandName来判断你点击了哪行
比如
string s=e.CommandName
if(s=="价格")
//执行rep_1里的东西
else if(s=="型号")
//执行rep_2里的东西
总体只是把3个方法弄到一个方法 判断罢了
分享一下。。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{
border:0;
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#pinpai,#jiage,#chicun,#pingtai,#xianka{
display:block;
}
#main{
width:500px;
height:500px;
}
.leibie{
font-size:14px;
font-weight:400;
}
.common{
font-size:12px;
margin-left:5px;
margin-right:5px;
}
#mainDIV a{
color:#666666;
text-decoration:none;
}
#mainDIV a:hover{
background-color:#4598d2;
}
.bgColor{
background-color:#4598d2;
}
</style>
<script type="text/javascript">
//加载事件
function jiazai()
{
var root = document.getElementById("mainDIV").getElementsByTagName("div");//找错一共有多少行。
for(var i = 0; i < root.length;i++)
{
var tagAs = root[i].getElementsByTagName("a");//每一行中由a标签构成的数组。
tagAs[0].className = 'bgColor';
}
}
//a标签的单击事件，改变背景颜色
function aClick(event)
{
var tag = event.srcElement || event.target;//找到单击被点击的元素
var father = tag.parentNode;
while(father.nodeName != "DIV")
{
father = father.parentNode;
}
var fatherID = father.id;
for(var i = 0; i < document.getElementById(fatherID).getElementsByTagName("a").length;i++)
{
document.getElementById(fatherID).getElementsByTagName("a")[i].className = "";
}
tag.className = 'bgColor';
alert(fe());
}
//遍历所有a标签，根据a标签的className不同来获取用户选中的类型
function fe()
{
var result = ""//记录返回的条件
var root = document.getElementById("mainDIV").getElementsByTagName("a");//获取id为mainDIV标签下面的所有a标签
for(var i = 0; i < root.length;i++)
{
if(root[i].className == 'bgColor')
{
result += root[i].innerHTML;
}
}
return result;
}
</script>
</head><body onload="jiazai()">
<div id="mainDIV">
<div id="pinpai">
<span class="leibie"><strong>品牌：</strong></span>
<span class="common"><a href="#" onclick="aClick(event)">全部</a></span>
<span class="common"><a href="#" onclick="aClick(event)">惠普</a></span>
<span class="common"><a href="#" onclick="aClick(event)">海尔</a></span>
<span class="common"><a href="#" onclick="aClick(event)">微星</a></span>
</div>
<div id="jiage">
<span class="leibie"><strong>价格：</strong></span>
<span class="common"><a href="#" onclick="aClick(event)">全部</a></span>
<span class="common"><a href="#" onclick="aClick(event)">1-2999</a></span>
<span class="common"><a href="#" onclick="aClick(event)">3000-3999</a></span>
<span class="common"><a href="#" onclick="aClick(event)">4000-4999</a></span>
<span class="common"><a href="#" onclick="aClick(event)">5000-5999</a></span>
</div>
<div id="chicun">
<span class="leibie"><strong>尺寸：</strong></span>
<span class="common"><a href="#" onclick="aClick(event)">全部</a></span>
<span class="common"><a href="#" onclick="aClick(event)">8.9英寸及以下</a></span>
<span class="common"><a href="#" onclick="aClick(event)">11英寸</a></span>
<span class="common"><a href="#" onclick="aClick(event)">12英寸</a></span>
<span class="common"><a href="#" onclick="aClick(event)">13英寸</a></span>
</div>
<div id="pingtai">
<span class="leibie"><strong>平台：</strong></span>
<span class="common"><a href="#" onclick="aClick(event)">全部</a></span>
<span class="common"><a href="#" onclick="aClick(event)">Inter平台</a></span>
<span class="common"><a href="#" onclick="aClick(event)">AMD平台</a></span>
<span class="common"><a href="#" onclick="aClick(event)">VIA平台</a></span>
</div>
<div id="xianka">
<span class="leibie"><strong>显卡：</strong></span>
<span class="common"><a href="#" onclick="aClick(event)">全部</a></span>
<span class="common"><a href="#" onclick="aClick(event)">独立显卡</a></span>
<span class="common"><a href="#" onclick="aClick(event)">集成显卡</a></span>
</div>
</div>
</body>
</html>
是的，终于完成了，谢谢你，晚上回去结贴前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
.red{border:solid 1px #c0c0c0;background-color:#c0c0c0;font-size:12px;}
.div{width:100%;border:solid 1px #c0c0c0;padding-left:10px;padding-top:10px;float:left}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="panMain" runat="server">
<div class="div">
<asp:Repeater runat="server" ID="rep_1">
<ItemTemplate>
<asp:LinkButton runat="server" ID="l1" Text='<%# Eval("UserName") %>' CommandName="com1" OnCommand="com" CommandArgument='<%# Eval("UserName") %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="div">
<asp:Repeater runat="server" ID="rep_2">
<ItemTemplate>
<asp:LinkButton runat="server" ID="l1" Text='<%# Eval("UserName") %>' CommandName="com2" OnCommand="com" CommandArgument='<%# Eval("UserName") %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="div">
<asp:Repeater runat="server" ID="rep_3">
<ItemTemplate>
<asp:LinkButton runat="server" ID="l1" Text='<%# Eval("UserName") %>' CommandName="com3" OnCommand="com" CommandArgument='<%# Eval("UserName") %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
</asp:Panel>
</form>
</body>
</html>后台代码：
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
System.Data.DataTable dt = GetDataTable();
rep_1.DataSource = dt;
rep_2.DataSource = dt;
rep_3.DataSource = dt;
rep_1.DataBind();
rep_2.DataBind();
rep_3.DataBind();
(rep_1.Items[0].FindControl("l1") as LinkButton).CssClass = "red";
(rep_2.Items[0].FindControl("l1") as LinkButton).CssClass = "red";
(rep_3.Items[0].FindControl("l1") as LinkButton).CssClass = "red";
SelectByConditions();
}
}
protected void com(object o, CommandEventArgs e)
{
string commandName = e.CommandName;
if (commandName == "com1")
{
//清楚所有LinkButton控件的CssClass属性。
for (int i = 0; i < rep_1.Items.Count; i++)
{
LinkButton l = rep_1.Items[i].FindControl("l1") as LinkButton;
l.CssClass = "";
}
//为类型为LinkButton的事件源添加CssClass属性。
(o as LinkButton).CssClass = "red";
}
else if (commandName == "com2")
{
for (int i = 0; i < rep_2.Items.Count; i++)
{
LinkButton l = rep_2.Items[i].FindControl("l1") as LinkButton;
l.CssClass = "";
}
(o as LinkButton).CssClass = "red";
}
else if (commandName == "com3")
{
for (int i = 0; i < rep_3.Items.Count; i++)
{
LinkButton l = rep_3.Items[i].FindControl("l1") as LinkButton;
l.CssClass = "";
}
(o as LinkButton).CssClass = "red";
}
//根据条件筛选
SelectByConditions();
} private DataTable GetDataTable()
{
string connectionString = "server=.;database=dbuser;uid=sa;pwd=000000";
SqlConnection conn = new SqlConnection(connectionString);
string sqlString = "select * from info";
SqlDataAdapter caChe = new SqlDataAdapter(sqlString, conn);
DataSet ds = new DataSet();
caChe.Fill(ds);
return ds.Tables[0];
}
//获取筛选条件
private string GetParames()
{
string parms = "";
foreach (Control c in panMain.Controls)
{
if (c is Repeater)
{
Repeater p = c as Repeater;
for (int i = 0; i < p.Items.Count; i++)
{
LinkButton lb = p.Items[i].FindControl("l1") as LinkButton;
if (lb.CssClass == "red")
{
parms += (lb.FindControl("l1") as LinkButton).Text;
}
}
}
}
return parms;
}
//根据条件筛选
private void SelectByConditions()
{
Response.Write(GetParames());
}}
如果感觉datalist麻烦
几行就几个label label.text="<a onclick=事件>名字</a>"组装起来 几个到时候JS全部初试华下就给选的颜色我好奇的事他的静态页面那，我还以为是真的那. 后来才知道是伪静态 .
害的我都动态生成静态了。 而且分页特麻烦. 修改就重生成静态, 新增的只能插在最下面， 要不得都重生成 ,郁闷死了
和用Repeater 控件差不多嘛，几行就几个Repeater 控件。
你去回一下我这个帖子，帖子飞分数都给你。。http://topic.csdn.net/u/20101012/17/5313604c-8990-4b6a-9fe7-4bbdff01c3be.html