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

Question

I have a master page in which i have a listview which contains anchor tags. 我有一个母版页，其中有一个包含锚标记的listview。

The problem is that I want to set the BackgroundColor only of the clicked anchor tag. 问题是我只想设置单击的锚标记的BackgroundColor。 The others should be default 其他应默认

I am populating the data from database for the anchor tags. 我正在从锚标记的数据库中填充数据。

MasterPage.aspx 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>

MasterPage CS 母版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();    
}
}

And The CSS File nice-menu.css 和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;
 }

Is there any function to do so or any other way? 是否有执行此操作的功能或其他方式？

Answer 1

You have to do it manually. 您必须手动执行。
First, prepare a css class for your 'active' anchor, for instance: 首先，为您的“活动”锚准备一个CSS类，例如：

.current {
    background-color: green
}

Then, check the current url and if matches any of your anchors href, add that class to it. 然后，检查当前URL，如果与您的任何anchor href相匹配，则将该类添加到其中。 You can do this server side, or client side. 您可以在服务器端或客户端。

If you do it server side, you could add a method in your masterpage's code behind (or in a separated .cs file) which get href as parameter and compare it to current location. 如果在服务器端进行操作，则可以在母版页代码的后面（或在单独的.cs文件中）添加一个方法，该方法将href用作参数并将其与当前位置进行比较。

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

Then, in your masterpage ListView: 然后，在您的母版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>
...

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

问题描述

1 个解决方案

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

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

问题描述

1 个解决方案

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

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