堆栈内存溢出
  繁体   English   中英

单击时更改锚标记的背景颜色，该颜色位于listview中，asp.net

[英]Change background color of an anchor tag when clicked, which is inside listview, asp.net

 原文  2015-08-28 10:12:00  6   1    asp.net/ listview/ visual-studio-2013/ webforms/ anchor

问题描述

我有一个母版页，其中有一个包含锚标记的listview。

问题是我只想设置单击的锚标记的BackgroundColor。 其他应默认

我正在从锚标记的数据库中填充数据。

MasterPage.aspx 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

 <!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>Report</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="smartpaginator.js" type="text/javascript"></script>
<link href="smartpaginator.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="datepicker.css" /> 
<link rel="stylesheet" type="text/css" href="nice-menu.css" />

<style type="text/css">
    body
    {
       /* padding: 20px;*/
    }
    #wrapper
    {
       /* margin: auto; */
        width: 800px;
    }
    .contents
    {
        width: 91%; /*height: 150px;*/
        margin: 0;
    }
    .contents > p
    {
        padding: 8px;
    }
    .table
    {
        width: 100%;
        border-right: solid 1px #FFFFFF;
    }
    .table th, .table td
    {
        width: 16%;
        height: 20px;
        padding: 4px;
        text-align: left;
    }
    .table th
    {
        border-left: solid 1px #FFFFFF; 
        border-top: solid 1px #FFFFFF;
        font-family:Verdana;
        font-size:small;
    }
    .table td
    {
        border-left: solid 1px #5f9000;
        border-bottom: solid 1px #5f9000;
        font-family:Verdana;
        font-size:small;
        background-color:White;
    }
    .header
    {
        background-color: #2758A4; 
        color: White;
    }
    #divs
    {
        margin: 0;
        height: 200px;
        font: verdana;
        font-size: 14px;
        background-color: White;
    }
    #divs > div
    {
        width: 98%;
        padding: 8px;
    }
    #divs > div p
    {
        width: 95%;
        padding: 8px;
    }
    ul.tab
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul.tab li
    {
        display: inline;
        padding: 10px;
        color: White;
        cursor: pointer;
        font-weight:bold;
        font-family:Verdana;
        font-size:small;
    }

    #container
    {
        width: 100%;
        border: solid 1px red;
    }
.style3 {font-family: Verdana; font-weight: bold; font-size: small; }
</style>


<body bgcolor="#DFDFDF">
<form id="form1" runat="server">
<table width="100%" border="0" cellspacing="0" cellpadding="0"  >
</table>
<table><!-- Body table start-->
<tr>
    <td valign="top" ><!--Left panel start -->
            <table border="0" width="15%" align="left" id="myTable"><!-- Left Panel table start -->
             <tr valign="top">
             <td>
            <div class = "container" style = "">
             <ul class = "nice1-menu" >
              <li><a style="background: rgb(39,88,164)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Reports </a></li>          
             </ul>

             <ul class = "nice-menu" runat="server" id="ulmenu">

                 <asp:ListView ID="ListView1" runat="server" class="nice-menu" 
                     onselectedindexchanged="Page_Load">
                    <LayoutTemplate>
                        <ul class="nice-menu">
                            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />    
                        </ul>                
                    </LayoutTemplate>
                    <ItemTemplate>
                        <li class="lightblue">
                            <a id="annexurelink" href='<%# Eval("Annexure_name")%>.aspx'>
                            <%# Eval("Annexure_name")%></a>                         
                        </li>
                    </ItemTemplate>
                    <EmptyDataTemplate>
                        <p>Nothing here.</p>
                    </EmptyDataTemplate> 
                  </asp:ListView>

             </ul>

           </div>                    
            </td>
            </tr>
            </table><!-- Left Panel table end -->
     </td><!--Left panel end -->
     <td valign="top"><!--Data panel start -->
        <table width="85%" border="0" cellpadding="0" cellspacing="0"><!-- data table start font-size:24px;  -->

        <div id="wrapper">

            <div id="green-contents" class="contents" style="border: solid 1px #2758A4;" ><!--   -->
                <!--wrapper table end -->
                <div id="green" style="margin: auto;">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>  
            </div>  

        </div>  
        </table><!-- data table end -->

    </td><!--Data panel end -->
</tr>
</table><!-- Body table start-->

</form>
</body>
</html>

母版CS 

protected void Page_Load(object sender, EventArgs e)
{

    SqlConnection cnn = new SqlConnection();
    cnn.ConnectionString = ("Data Source=3ALT15B0057; Initial Catalog=Practice; Integrated Security=true");
    SqlDataAdapter parentNode = new SqlDataAdapter("Select * from Annexure_list order by Annexure_name asc", cnn);
    SqlCommandBuilder cmd = new SqlCommandBuilder(parentNode);
    DataSet ds = new DataSet();
    parentNode.Fill(ds, "Annexure_list");

    this.ListView1.DataSource = ds;
    this.ListView1.DataBind();    
}
}

和CSS文件 nice-menu.css 

      * { margin:0; padding: 0;}  

      body {
        font-family: Helvetica, Verdana;
        font-size: 12px;
        /*background: rgb(42,32,30);*/
      }

      div.container {
        width: 150px;
        height: 500px;
        margin: 0px; 
        background: rgb(39,88,164);
      }

      div.header {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        background: rgb(78,92,127);
        margin-bottom: 20px;
      }

      div.header p {
        padding: 0 10px; 
      }

      div.header a {
        color: #FFF;
        text-decoration: none;
        font-weight: bold;
      }



/*------------- Nice 1 Menu -------------*/

ul.nice1-menu li {
width: 5px;
height: 30px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
background: transparent;
width: 5px;
}

ul.nice1-menu a {
width: 130px; 
text-decoration: none;
font-size: 14px;
color: #FFF;
/*text-shadow: 0px 0px 3px #333;*/
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px; 
}



/*------------- Nice Menu -------------*/

ul.nice-menu {
list-style: none;
/*margin-top: 30px;*/
width: 150px;
}

ul.nice-menu li {
width: 5px;
height: 30px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
background: transparent;
width: 5px;
}

ul.nice-menu.tight li {
margin-top: 0 !important;
}

ul.nice-menu a {
width: 130px; 
text-decoration: none;
font-size: 14px;
color: #FFF;
/*text-shadow: 0px 0px 3px #333;*/
font-weight: bold;
 position: absolute;
padding: 5px 0px;
padding-left: 20px; 
}

ul.nice-menu li.lightblue {
background: rgb(199,230,255) !important;
}


ul.nice-menu li:hover {
width: 150px; 
padding-left: auto;
-moz-animation-name: expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
 }

是否有执行此操作的功能或其他方式？

1 个解决方案

解决方案1
 0 已采纳  2015-08-28 12:31:33

您必须手动执行。
首先，为您的“活动”锚准备一个CSS类，例如： 

.current {
    background-color: green
}

然后，检查当前URL，如果与您的任何anchor href相匹配，则将该类添加到其中。 您可以在服务器端或客户端。

如果在服务器端进行操作，则可以在母版页代码的后面（或在单独的.cs文件中）添加一个方法，该方法将href用作参数并将其与当前位置进行比较。 

protected bool MatchesToCurrentLocation(string href) 
{
    return HttpContext.Current.Request.FilePath.ToLower().Contains(href.ToLower());
}

然后，在您的母版ListView中： 

....
<ItemTemplate>
    <li class="lightblue <%# MatchesToCurrentLocation(Eval("Annexure_name") + ".aspx") ? "current" : "" %>">
        <a id="annexurelink" href='<%# Eval("Annexure_name")%>.aspx'>
            <%# Eval("Annexure_name")%>
        </a>                         
    </li>
</ItemTemplate>
...

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击时在listitem中更改锚点上的背景颜色 ASP.NET DataList-MouseOver时行背景颜色更改 使用javascript在asp.net中单击时停止锚的重定向 在ASP.Net ListView的选定行上设置背景色？ 单击没有后退或更新面板时的ASP.NET更改链接按钮颜色 ASP.NET-单击按钮时如何更改背景图像的位置？ 如何在 ASP.NET C# 中单击按钮时更改网站的背景颜色 锚标记在asp.net中无法正常工作 当用户更改asp.net列表视图中的下拉列表时，如何触发事件？ 更改特定行的背景颜色asp.net c＃
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM