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
问题是我只想为被点击的锚标签设置BackgroundColor。其他应该是默认的
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
和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?
是否有任何功能可以这样做或以任何其他方式?
1 个解决方案
#1
0
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. You can do this server side, or client side.
然后,检查当前网址,如果匹配任何锚点href,请将该类添加到其中。您可以执行此服务器端或客户端。
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>
...
#1
0
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. You can do this server side, or client side.
然后,检查当前网址,如果匹配任何锚点href,请将该类添加到其中。您可以执行此服务器端或客户端。
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>
...