JS选中样式,仿QQ空间自定义空间头部选择样式(9元包邮)

本博主最近正在建设一个9元包邮的网站,希望各位光临指导一些意见: 9元包邮 http://www.jiubaou.com/


CSS部分

<style type="text/css">
        .list{ width:240px;}
        .list li
        {
         background:url(images/bg1.gif);float:left; width:57px; height:57px; margin-left:1px;margin-right:1px; cursor:pointer;}

        .list li img
        {
          margin-top:10px;
        }
        .list li span
        {
         margin-top:5px;}
    </style>

 

.aspx文件Repeater 绑定:

<ul class="list">
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="AccessDataSource1">
        <ItemTemplate>
          <li οnclick="checklist(this,'<%#Eval("listname") %>')"><img alt="<%#Eval("listname") %>" src="images/listimg/<%#Eval("imgurl") %>" /><br /><span><%#Eval("listname") %></span></li>
        </ItemTemplate>
        </asp:Repeater>
 </ul>

 

.aspx中JS:

<script language="javascript" type="text/javascript">
    var oldlistElm;
    function checklist(obj,strlist)
    {
        if(oldlistElm)
        {
            oldlistElm.style.background ="url(images/bg1.gif)";
        }
        obj.style.background="url(images/bg2.gif)";
        oldlistElm = obj;
        alert("你选择了" + strlist + "方案!");
    }
 </script>

 

背景图片: bg1.gif bg2.gif   ("images/listimg/<%#Eval("imgurl") %>" )

 


版权声明:本文为cxfcxj原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。