最近我在做站点的时候,遇到一个小问题,如何使当前选中的页面激活项和页面对应,然后就简单的写了一个小小的示例,废话少说,直接看demo:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
public string home, services, takeatour;
protected void Page_Load(object sender, EventArgs e)
{
System.IO.FileInfo fi = new System.IO.FileInfo(System.Web.HttpContext.Current.Request.Url.AbsolutePath);
string currentPagename = fi.Name;
Actived(currentPagename);
}
/// <summary>
/// Active page
/// </summary>
/// <param name="currentPagename">active current page</param>
void Actived(string currentPagename)
{
switch (currentPagename)
{
case "home.aspx":
{
home = "current_page_item";
services = "";
takeatour = "";
break;
}
case "service.aspx":
{
home = "";
services = "current_page_item";
takeatour = "";
break;
}
case "takeatour.aspx":
{
home = "";
services = "";
takeatour = "current_page_item";
break;
}
default:
{
home = "current_page_item";
services = "";
takeatour = "";
break;
}
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="menu">
<ul>
<li class="<%= home %>"><a href="home.aspx">Home</a></li>
<li class="<%= services %>"><a href="service.aspx">Services</a></li>
<li class="<%= takeatour %>"><a href="takeatour.aspx">Take a tour</a></li>
</ul>
</div>
<br />
<br />
<br />
<br />
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<br />
</div>
</form>
</body>
</html>
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%@ Page Language="C#" MasterPageFile="~/main.master" Title="Home" %><script runat="server"></script><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><div>Home</div></asp:Content>
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%@ Page Language="C#" MasterPageFile="~/main.master" Title="Service" %><script runat="server"></script><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><div>Service</div></asp:Content>
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%@ Page Language="C#" MasterPageFile="~/main.master" Title="Take a tour" %><script runat="server"></script><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><div>Take a tour</div></asp:Content>
CSS.css
#menu {
float: left;
width: 800px;
height: 60px;
background-color:Green;
font-family: Arial, Helvetica, sans-serif;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
background-color:Green;
height: 60px;
padding: 0 15px 0 15px;
}
#menu a {
display: block;
float: left;
height: 25px;
margin-right: 1px;
padding: 22px 20px 0 20px;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
color: #2C2E22;
}
#menu .current_page_item a {
color: #2C2E22;
}
当然方法不是一种,这个不一定是最好的。但是我觉得解决问题就是好的。 故我只是写了一个示例,供初学者参考,当然如果你有什么建议也可以提出。