Question

我有一个母版页，其中我有一个包含锚标签的列表视图。

问题是我只想为点击的锚标签设置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>

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();    
}
}

和CSS文件 可有可无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;
 }

是否有任何功能可以这样做或以其他方式？

Answer 1

你必须手动完成。
首先，为您的“活跃”准备一个css课程。锚，例如：

.current {
    background-color: green
}

然后，检查当前网址，如果匹配任何锚点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>
...

单击时更改锚标记的背景颜色，这是listview，asp.net中的内容

1 个答案: