在 asp 中包含彩色 link 的文件菜单活动页面

Question

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

navigation.inc样本：

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

有一个class叫活跃。将导航 link 绘制为蓝色。当我导航到 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

添加自定义 iif 函数来简化 nav.asp 页面

<%
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 来自动化链接上的 "active" 或 "currentPage" class。

<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（包含各种"templates" --- 页眉、页脚、函数等）：

<% 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 中包含彩色 link 的文件菜单活动页面

include file menu active page colored link in asp

asp-classic