title: Change background color of an anchor tag when clicked, which is inside listview, asp.net
body: <p>I have a master page in which i have a listview which contains anchor tags.</p>
  
  <p><strong>The problem is that I want to set the BackgroundColor only of the clicked anchor tag. The others should be default</strong></p>
  
  <p>I am populating the data from database for the anchor tags.</p>
  
  <p><strong>MasterPage.aspx</strong></p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %&gt;
  
   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Report&lt;/title&gt;
  &lt;script src="jquery-1.4.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="smartpaginator.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="smartpaginator.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="datepicker.css" /&gt; 
  &lt;link rel="stylesheet" type="text/css" href="nice-menu.css" /&gt;
  
  &lt;style type="text/css"&gt;
      body
      {
         /* padding: 20px;*/
      }
      #wrapper
      {
         /* margin: auto; */
          width: 800px;
      }
      .contents
      {
          width: 91%; /*height: 150px;*/
          margin: 0;
      }
      .contents &gt; 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 &gt; div
      {
          width: 98%;
          padding: 8px;
      }
      #divs &gt; 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; }
  &lt;/style&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;body bgcolor="#DFDFDF"&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"  &gt;
  &lt;/table&gt;
  &lt;table&gt;&lt;!-- Body table start--&gt;
  &lt;tr&gt;
      &lt;td valign="top" &gt;&lt;!--Left panel start --&gt;
              &lt;table border="0" width="15%" align="left" id="myTable"&gt;&lt;!-- Left Panel table start --&gt;
               &lt;tr valign="top"&gt;
               &lt;td&gt;
              &lt;div class = "container" style = ""&gt;
               &lt;ul class = "nice1-menu" &gt;
                &lt;li&gt;&lt;a style="background: rgb(39,88,164)"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Reports &lt;/a&gt;&lt;/li&gt;          
               &lt;/ul&gt;
  
               &lt;ul class = "nice-menu" runat="server" id="ulmenu"&gt;
  
                   &lt;asp:ListView ID="ListView1" runat="server" class="nice-menu" 
                       onselectedindexchanged="Page_Load"&gt;
                      &lt;LayoutTemplate&gt;
                          &lt;ul class="nice-menu"&gt;
                              &lt;asp:PlaceHolder ID="itemPlaceholder" runat="server" /&gt;    
                          &lt;/ul&gt;                
                      &lt;/LayoutTemplate&gt;
                      &lt;ItemTemplate&gt;
                          &lt;li class="lightblue"&gt;
                              &lt;a id="annexurelink" href='&lt;%# Eval("Annexure_name")%&gt;.aspx'&gt;
                              &lt;%# Eval("Annexure_name")%&gt;&lt;/a&gt;                         
                          &lt;/li&gt;
                      &lt;/ItemTemplate&gt;
                      &lt;EmptyDataTemplate&gt;
                          &lt;p&gt;Nothing here.&lt;/p&gt;
                      &lt;/EmptyDataTemplate&gt; 
                    &lt;/asp:ListView&gt;
  
               &lt;/ul&gt;
  
             &lt;/div&gt;                    
              &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;&lt;!-- Left Panel table end --&gt;
       &lt;/td&gt;&lt;!--Left panel end --&gt;
       &lt;td valign="top"&gt;&lt;!--Data panel start --&gt;
          &lt;table width="85%" border="0" cellpadding="0" cellspacing="0"&gt;&lt;!-- data table start font-size:24px;  --&gt;
  
          &lt;div id="wrapper"&gt;
  
              &lt;div id="green-contents" class="contents" style="border: solid 1px #2758A4;" &gt;&lt;!--   --&gt;
                  &lt;!--wrapper table end --&gt;
                  &lt;div id="green" style="margin: auto;"&gt;
                      &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
                      &lt;/asp:ContentPlaceHolder&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;  
  
          &lt;/div&gt;  
          &lt;/table&gt;&lt;!-- data table end --&gt;
  
      &lt;/td&gt;&lt;!--Data panel end --&gt;
  &lt;/tr&gt;
  &lt;/table&gt;&lt;!-- Body table start--&gt;
  
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>MasterPage CS</strong></p>
  
  <pre><code>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();    
  }
  }
  </code></pre>
  
  <p><strong>And The CSS File</strong>
  nice-menu.css</p>
  
  <pre><code>      * { 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;
   }
  </code></pre>
  
  <p>Is there any function to do so or any other way?</p>