Question

我的页面太多了。当我更改菜单上的某些内容时，我必须更改每一页。我不想一次又一次地为每个页面编写导航菜单，因此我使用了include文件导航菜单。我不太了解asp，但是我想使用它。

navigation.inc示例：

<a class="nav-link active" href="link1.asp">Link 1</a>
<a class="nav-link" href="link2.asp">Link 2</a>

有一类叫做活动类。将导航链接绘制为蓝色。当我导航到link2页面时，我想这样做

<a class="nav-link" href="link1.asp">Link 1</a>
<a class="nav-link active" href="link2.asp">Link 2</a>

我怎么能用asp classic？我尝试了一些东西，但是看起来很荒谬。有什么简单而专业的方法吗？

感谢所有信息。

Answer 1

在所有页面中添加包含内容：

<%
...
%>
<!--#include file="nav.asp"-->
<%
...
%>

还有您的nav.asp页：

<%
curPageName = Request.ServerVariables("URL")

if curPageName = "link1.asp" then
    %>
    <a class="nav-link active" href="link1.asp">Link 1</a>
    <a class="nav-link" href="link2.asp">Link 2</a>
    <%
end if

if curPageName = "link2.asp" then
    %>
    <a class="nav-link" href="link1.asp">Link 1</a>
    <a class="nav-link active" href="link2.asp">Link 2</a>
    <%
end if
%>

您可以通过向vbscript添加自定义nav.asp函数来简化iif页面

<%
function iif(condition, t, f)
    if condition then
        iif = t
    else
        iif = f
    end if
end function

curPageName = Request.ServerVariables("URL")
%>
<a class="nav-link<%=iif(curPageName = "link1.asp", " active", "")%>" href="link1.asp">Link 1</a>
<a class="nav-link<%=iif(curPageName = "link2.asp", " active", "")%>" href="link2.asp">Link 2</a>

Answer 2

在您希望页面出现的页面中使用navigation。

navigation.asp：

<a class="nav-link" href="link1.asp">Link 1</a>
<a class="nav-link" href="link2.asp">Link 2</a>

然后使用一些jQuery自动执行链接上的“活动”或“ currentPage”类。

<script>
    $(document).ready(function () {
        //Loop through all <a href> elements and see if it matches current page, if it does add "active" class to that link
        $("a").each(function () {
            if ($(this).attr("href") === window.location.pathname) {
                $(this).addClass("active");
            } else if ($(this).attr("href") === window.location.href) {
                $(this).addClass("active");
            } else if ($(this).attr("href") === window.location.pathname + window.location.search) {
                $(this).addClass("active");
            }
        });
    });
</script>

示例home.asp（带有各种“模板” ---页眉，页脚，函数等）：

<% Option Explicit %>
<!-- #include virtual="/local/scripts/vbs/settings.asp" -->
<!-- #include virtual="/global/scripts/vbs/db.asp" -->
<!-- #include virtual="/global/scripts/vbs/format.asp" -->
<!-- #include virtual="/global/scripts/vbs/pages.asp" -->

<!-- #include virtual="/global/shared/templates/inc-doctype.asp" -->
<html lang="en">

<head>
<title><%=PageTitle & gWebTitle%></title>
<meta name="description" content="<%=TitlePageHeading%>">
<!-- #include virtual="/global/shared/templates/inc-meta.asp" -->
<!-- #include virtual="/global/shared/templates/inc-styles.asp" -->
<!-- #include virtual="/global/shared/templates/inc-scripts.asp" -->
</head>
<body>

<!-- #include virtual="/local/scripts/templates/header.inc" -->

<%
    'Main Page Content Goes Here
%>

<!-- #include virtual="/local/scripts/templates/footer.inc" -->

<script>
    $(document).ready(function () {
        //Loop through all <a href> elements and see if it matches current page, if it does add "active" class to that link
        $("a").each(function () {
            if ($(this).attr("href") === window.location.pathname) {
                $(this).addClass("active");
            } else if ($(this).attr("href") === window.location.href) {
                $(this).addClass("active");
            } else if ($(this).attr("href") === window.location.pathname + window.location.search) {
                $(this).addClass("active");
            }
        });
    });
</script>

</body>

</html>

在ASP中包含文件菜单活动页面彩色链接

2 个答案: