这个功能该怎么实现？？？

qingYun1029 2010-11-10 01:17:24
京东商城网里面的一个功能，请大家先看看。。
http://www.360buy.com/products/670-671-672-0-1340-0-0-0-0-0-1-1-1.html



怎样做每次点击时背景颜色都改变？？？
并且每一行的每一列都互斥???每一行之间也互斥？？？
...全文
657 75 打赏 收藏 转发到动态 举报
写回复
用AI写文章
75 条回复
切换为时间正序
请发表友善的回复…
发表回复
by_封爱 2010-11-11
  • 打赏
  • 举报
 回复
其实一个command也行

只不过你前台的linkbutton得设置 e.CommandName
然后调用一个command 通过e.CommandName来判断你点击了哪行
比如
string s=e.CommandName
if(s=="价格")
//执行rep_1里的东西
else if(s=="型号")
//执行rep_2里的东西
总体只是把3个方法弄到一个方法 判断罢了
qingYun1029 2010-11-11
  • 打赏
  • 举报
 回复
前台代码，我在里面添加了一个<asp:Panel ID="panMain" runat="server">标签，方便遍历。


<%@ 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>

qingYun1029 2010-11-11
  • 打赏
  • 举报
 回复
问题解决了，自认为这种方案是比较好的，说一下理由：
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;

    }

}

leijianyiliyi 2010-11-11
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 taomanman 的回复:]
<!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" xml:lang="en" lang="en">
……
[/Quote]

这个行不？？？
qingYun1029 2010-11-11
  • 打赏
  • 举报
 回复
[Quote=引用 73 楼 diaodiaop 的回复:]

什么问题啊?
[/Quote]

你去回一下我这个帖子，帖子飞分数都给你。。

http://topic.csdn.net/u/20101012/17/5313604c-8990-4b6a-9fe7-4bbdff01c3be.html
liffe 2010-11-11
  • 打赏
  • 举报
 回复
来看，来学习。顺便看看200分的贴
by_封爱 2010-11-11
  • 打赏
  • 举报
 回复
什么问题啊?
qingYun1029 2010-11-11
  • 打赏
  • 举报
 回复
[Quote=引用 70 楼 wang2129929 的回复:]

这个我还真就特意研究过， 因为我有个项目要仿照这个做。 背竟啥的还不难， 互斥也不难. 放一个datalist 加个事件就行. 几行就几个 datalist
如果感觉datalist麻烦
几行就几个label label.text="<a onclick=事件>名字</a>"组装起来 几个到时候JS全部初试华下就给选的颜色

我好奇的事他的静态页面那，我还以为是真的那. 后……
[/Quote]

和用Repeater 控件差不多嘛，几行就几个Repeater 控件。
qingYun1029 2010-11-11
  • 打赏
  • 举报
 回复


上面的（js+div+css）效果图。。。
好奇都是要学的 2010-11-11
  • 打赏
  • 举报
 回复
这个我还真就特意研究过， 因为我有个项目要仿照这个做。 背竟啥的还不难， 互斥也不难. 放一个datalist 加个事件就行. 几行就几个 datalist
如果感觉datalist麻烦
几行就几个label label.text="<a onclick=事件>名字</a>"组装起来 几个到时候JS全部初试华下就给选的颜色

我好奇的事他的静态页面那，我还以为是真的那. 后来才知道是伪静态 .
害的我都动态生成静态了。 而且分页特麻烦. 修改就重生成静态, 新增的只能插在最下面， 要不得都重生成 ,郁闷死了
qingYun1029 2010-11-11
  • 打赏
  • 举报
 回复
[Quote=引用 66 楼 diaodiaop 的回复:]

其实一个command也行

只不过你前台的linkbutton得设置 e.CommandName
然后调用一个command 通过e.CommandName来判断你点击了哪行
比如
string s=e.CommandName
if(s=="价格")
//执行rep_1里的东西
else if(s=="型号")
//执行rep_2里的东西
总体只是把3个方法弄……
[/Quote]

是的，终于完成了，谢谢你，晚上回去结贴。。。

前台代码：
<%@ 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());

    }



}
q500306003 2010-11-11
  • 打赏
  • 举报
 回复
纠结啊,告诉你个简单的, 右键查看原代码就什么都可以看到了。 给份吧
qingYun1029 2010-11-11
  • 打赏
  • 举报
 回复
自己用js+div+css做了一个。。。
分享一下。。

<!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>

hch126163 2010-11-10
  • 打赏
  • 举报
 回复
一个简单例子：把以下文件保存为： XXX.htm 格式 多条件搜索显示效果.htm这样可以不修改js.复杂修改：var fileName="多条件搜索显示效果.htm?p="; // 当前相对url + "p="

访问时： XXX.htm 默认‘全部’选中 





<!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>
xrongzhen 2010-11-10
  • 打赏
  • 举报
 回复
[Quote=引用 54 楼 qingyun1029 的回复:]
引用 53 楼 huangwenquan123 的回复:

HTML code

<!--jquery实现-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmln……
[/Quote]

和查询条件没什么关系，这只是实现的界面的效果，至于查询条件你可以通过后台代码，将选择项对应的数据保存到变量
huangwenquan123 2010-11-10
  • 打赏
  • 举报
 回复
[Quote=引用 54 楼 qingyun1029 的回复:]
引用 53 楼 huangwenquan123 的回复:

HTML code

<!--jquery实现-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmln……
[/Quote]当点击的时候你可以跳转到本页，把参数传到后台，通过判断参数，新增条件语句判断即可！
demoooo 2010-11-10
  • 打赏
  • 举报
 回复
css + js
wangyu32 2010-11-10
  • 打赏
  • 举报
 回复
css or js 就可以了，多看些有关这方面的书
Q2774 2010-11-10
  • 打赏
  • 举报
 回复
为什么CSDN里没有C语言.....
qingYun1029 2010-11-10
  • 打赏
  • 举报
 回复
[Quote=引用 55 楼 jolinfish 的回复:]

这个不难啊！DIV+CSS+JQ完全可以实现呢！首先你需要获得一些规格，在这些默认的规格上定义好一个class样式，最好是class。因为ID有些时候会获取不到样式，当我们鼠标移动到某个项时，给它个背景色，移开时丢失样式。
例如：
<style type="text/css">
.a_bg
{
background-color:#ccc;
}

</s……
[/Quote]

你说的功能和我要求完全不一样。。。
加载更多回复（52）
小程序实现加好友聊天功能，同微信聊天QQ聊天
实现跟微信QQ聊天相同的功能，用户进来首先进行注册，然后注册过的用户可以直接登录。登录完成后可以切换账号，也可以再注册账号，一个用户可以注册多个账号，和QQ一样。可以根据好友账号添加好友，然后申请成为好友，对方同意后，可以进行聊天。页面分为消息页面、通讯录/好友列表页面，我的页面，和QQ微信的布局一样，聊天页面布局效果和QQ微信一样。技术上采用JavaScript、html、css这些实现，数据库存储在云数据库里面，图片存储在云存储里面，核心是数据库的设计和业务逻辑的梳理，以及js的灵活运用。CMS管理后台，大家需要的话，可以根据我的教程来实现，这个是额外的一个后台管理功能，这个管理数据的话再web端，非常的方便！
1小时入门最新小程序授权登录注册功能开发，并把注册记录添加到数据库
使用wx.getUserProfile解决老版本getUserInfo无法获取用户昵称和头像的问题.手把手带你实现微信小程序个人中心页。 新版微信小程序授权登录，退出，缓存，小程序个人中心的实现 如果把用户授权的信息存入Mysql/云开发的数据库，怎么实现呢？ 授权登录对于不同的用户好像没有唯一的标识，是不是还得获取openid才行？ 授权登录必须从button 点击事件发起吗？ 能不能注册的时候，给用户分配一个QQ号功能？
基于微信小程序原生开发从头实现小程序常见功能（基础篇）
      基于微信小程序原生开发从头实现小程序常见功能，包括小程序开发基础知识及常用开发功能如登录、找回密码、文件上传、多媒体功能、编辑表单、详情界面、列表界面等，并实现简单的在线预约系统相关功能，具体内容如下：常见功能实现：实现用户登录（用户名密码登录、手机验证码登录、小程序自动登录）、找回密码、用户注册、小程序授权、修改密码、关于我们、意见反馈、系统消息、表单录入、详情查看、列表查看等功能。公共常用组件：实现公共组件的抽离以便能进行扩展及复用，包括输入框、选择框、分步组件、swiper组件、视频播放、富文本编辑、文件上传、视频上传、编辑表单、详情界面、列表界面、tab组件、地图等常用的组件。源码获取说明：点击 https://gitcode.net/invite_link?invite_code=UdfJQACWXRWX9z9NJy_x 申请加入gitcode项目，申请之后会进行审核，购买了课程的用户会直接审核通过。使用会员免费看的用户请留言一下账号才会审核通过。若长时间未审核通过请留言或私信联系处理，留言时请备注下gitcode中的昵称。
10分钟实现微信小程序支付功能
老规矩，先看本节效果图我们实现这个支付功能完全是借助小程序云开发实现的，不用搭建自己的服务器，不用买域名，不用备案域名，不用支持https。只需要一个简单的云函数，就可以轻松的实现微信小程序支付功能。核心代码就下面这些一，创建一个云开发小程序关于如何创建云开发小程序，这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学，可以去翻看我之前的文章，或者看下我录制的视频：https://edu.csdn.net/course/play/9604/204528创建云开发小程序有几点注意的1，一定不要忘记在app.js里初始化云开发环境。2，创建完云函数后，一定要记得上传二， 创建支付的云函数1，创建云函数pay三，引入三方依赖tenpay我们这里引入三方依赖的目的，是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node，我这里不做讲解，百度一下，网上一大堆。1，首先右键pay，然后选择在终端中打开2，我们使用npm来安装这个依赖。在命令行里执行 npm i tenpay安装完成后，我们的pay云函数会多出一个package.json 文件到这里我们的tenpay依赖就安装好了。四，编写云函数pay完整代码如下//云开发实现支付 const cloud = require('wx-server-sdk')cloud.init() //1，引入支付的三方依赖 const tenpay = require('tenpay'); //2，配置支付信息 const config = ;exports.main = async(event, context) => 一定要注意把appid，mchid，partnerKey换成你自己的。到这里我们获取小程序支付所需参数的云函数代码就编写完成了。不要忘记上传这个云函数。出现下图就代表上传成功五，写一个简单的页面，用来提交订单，调用pay云函数。这个页面很简单，1，自己随便编写一个订单号（这个订单号要大于6位）2，自己随便填写一个订单价（单位是分）3，点击按钮，调用pay云函数。获取支付所需参数。下图是官方支付api所需要的一些必须参数。下图是我们调用pay云函数获取的参数，和上图所需要的是不是一样。六，调用wx.requestPayment实现支付下图是官方的示例代码这里不在做具体讲解了，完整的可以看视频。实现效果1，调起支付键盘2，支付完成3，log日志，可以看出不同支付状态的回调上图是支付成功的回调，我们可以在支付成功回调时，改变订单支付状态。下图是支付失败的回调，下图是支付完成的状态。到这里我们就轻松的实现了微信小程序的支付功能了。是不是很简单啊，完整的讲解可以看视频。
企业项目开发高频技术：登录功能实现
开发人员在企业项目中做登录功能时，随着内部项目增多，每个系统都需要开发登录模块，功能开发成本随之增加；用户在访问网站资源时，每个系统都需要独立的账户密码，对用而言容易遗忘不便于管理；在微服务架构流行时，服务间的登录鉴权如何设计?通过本期课程将解决这些场景问题。本期课程基于JAVA编程语言，来介绍关于企业的登录OAuth2授权登录、SSO单点登录、微服务鉴权登录三部分。为我们开发企业项目登录提供一些思路，让学员理解每个场景的登录方案设计
.NET社区

62,050

社区成员

669,050

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章