您的位置：首页 > 运维架构 > 网站架构

网站导航栏目焦点设置

2014-06-13 11:35 197 查看

一般访问网站时，访问到不同的栏目，导航上的链接会高亮，显示的样式和其他栏目不一样，这种效果实现很简单，原理如下

　　获取当前的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 是重新创建的页面，调用了该母版

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航