Change background color of an anchor tag when clicked, which is inside listview, asp.net
Question
I have a master page in which i have a listview which contains anchor tags.
The problem is that I want to set the BackgroundColor only of the clicked anchor tag. The others should be default
I am populating the data from database for the anchor tags.
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)"> 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
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
* { 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?
1 answers
solution1
0 ACCPTED 2015-08-28 12:31:33
You have to do it manually.
First, prepare a css class for your 'active' anchor, for instance:
.current {
background-color: green
}
Then, check the current url and if matches any of your anchors href, add that class to it. 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.
protected bool MatchesToCurrentLocation(string href)
{
return HttpContext.Current.Request.FilePath.ToLower().Contains(href.ToLower());
}
Then, in your masterpage 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>
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change background color on anchor in listitem when clicked
ASP.NET DataList - Row Background Color Change When MouseOver
Stop redirection of anchor when clicked in asp.net using javascript
Setting the background color on a selected row on an ASP.Net ListView?
ASP.NET Change link button color when clicked without post-back or update panel
ASP.NET - How can I change the position of a background image when a button is clicked?
How to change background colour of a website when a button is clicked in ASP.NET C#
Anchor tag not working properly in asp.net
How to fire an event when user change a dropdownlist inside an asp.net listview?
change background color of a specific Row asp.net c#
Related Tags