一般访问网站时，访问到不同的栏目，导航上的链接会高亮，显示的样式和其他栏目不一样，这种效果实现很简单，原理如下
获取当前的url路径location.pathname，然后和导航中的链接匹配，匹配了就设置焦点样式。如果栏目不是页面，而是通过传递参数来实现，可以location.search中获取栏目参数来匹配。
下面是一个就简单的示例，建立1.html,2.html,3.html,4.html文件，内容全部为下面贴出的html代码，效果如下
获取当前的url路径location.pathname，然后和导航中的链接匹配，匹配了就设置焦点样式。如果栏目不是页面，而是通过传递参数来实现，可以location.search中获取栏目参数来匹配。
下面是一个就简单的示例，建立1.html,2.html,3.html,4.html文件，内容全部为下面贴出的html代码，效果如下
<pre class="javascript" name="code"><%@ 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 id="Head1" runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div id="dvGuider">
<a href="Default3.aspx">1.html</a>
<a href="Default4.aspx">2.html</a>
<a href="Default.aspx">3.html</a>
</div>
<script type="text/javascript">
var pn = location.pathname;
var as = document.getElementById('dvGuider').getElementsByTagName('a'), find = false;
for (var i = 0, j = as.length; i < j; i++)
if (as[i].href.indexOf(pn) != -1) { as[i].className = 'focus'; find = true; break; }
//if (!find) as[0].className = 'focus';//如果未找到匹配的，需要设置哪个获取焦点可以修改这句
</script>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
//此处是其他页面内容，调用该页面 </asp:ContentPlaceHolder>
</form>
</body>
</html>
ASP,NET使用母版，当点击菜单时，跳转的页面对应的菜单处于选中状态：先创建母版页，设计母版页的头部和底部，菜单，如上例所示 Default3.aspx Default4.aspx 是重新创建的页面，调用了该母版
扫一扫
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
