<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
        var selectedOption =new Array();
        function createbutton(elem)
        {
            
            $addHandlers(elem,
                            {
                                mouseover:showHoverStyle,
                                mouseout:showDefaultSyle,
                                click:handleClick
                            }            
                        );                          
        }
        
        function showHoverStyle()
        {
            
            if(!Sys.UI.DomElement.containsCssClass(this,"clicked"))
            {
                Sys.UI.DomElement.addCssClass(this,"hover");
            }
        }
        
        function showDefaultSyle()
        {
            Sys.UI.DomElement.removeCssClass(this,"hover");
        }
        function handleClick()
        {                       
            Sys.UI.DomElement.removeCssClass(this,"hover");
            Sys.UI.DomElement.toggleCssClass(this,"clicked");
            if(Sys.UI.DomElement.containsCssClass(this,"clicked"))
            {
                if(!Array.contains(selectedOption,this.innerHTML))
                {
                    Array.add(selectedOption,this.innerHTML);   
                }
            }
            else
            {
                Array.remove(selectedOption,this.innerHTML);
            }
            
            var textBuilder=new Sys.StringBuilder();
            for(var index=0;index<selectedOption.length;index++)
            {
                textBuilder.append(selectedOption[index]);
            }
            
          
            $get("selectedOption").innerHTML=textBuilder.toString(", ");
        }        
        function pageLoad()
        {
            var childNodes=$get("Buttons").childNodes;
            var count=childNodes.length;
            for(var index=0;index<count;++index)
            {
               createbutton(childNodes[index]);
            }           
        }        
    </script>
   <style type="text/css">
    #Buttons div
    {
        padding:3px;
        margin:1px 4px;
        width 80px;
        border :1px solid #555555;
        font-weight: bold;
        float: left;
        cursor:pointer;
    }
    .clicked
    {
       background-color: #363636;        
    }
    .hover
    {
        background-color: #999999;
    }
   </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div id="Buttons">
            <div id="Option1">Option 1</div>
            <div id="Option2">Option 2</div>
            <div id="Option3">Option 3</div>
            <div id="Option4">Option 4</div>
            <div id="Option5">Option 5</div>
        </div>
        <span id="selectedOption"></span>
    </form>
</body>
</html>
帮忙看一下!!