网站导航栏目焦点设置

来源：互联网发布：三维动态仿真软件编辑：程序博客网时间：2024/05/21 10:38

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

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

0 0