include file menu active page colored link in asp

up vote
1
down vote

favorite

I have too many pages. when I change something on menu I have to change every page. I don't want to write navigation menu for every page again and again, so I used include file navigation menu.
I don't know asp too much but I want to use it.

navigation.inc sample:

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

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

there is a class called active. paints the navigation link in blue. when I navigate to link2 page I want to do this

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

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

how can I that with asp classic? I tried something but it's looks ridiculous. is there any easy and professional way?

thanks for all information.

edited Nov 9 at 9:04

Ina Plaksin

1352

asked Nov 9 at 8:55

Deniz Karadeniz

add a comment |

up vote
1
down vote

favorite

navigation.inc sample:

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

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

there is a class called active. paints the navigation link in blue. when I navigate to link2 page I want to do this

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

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

how can I that with asp classic? I tried something but it's looks ridiculous. is there any easy and professional way?

thanks for all information.

edited Nov 9 at 9:04

Ina Plaksin

1352

asked Nov 9 at 8:55

Deniz Karadeniz

add a comment |

up vote
1
down vote

favorite

navigation.inc sample:

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

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

there is a class called active. paints the navigation link in blue. when I navigate to link2 page I want to do this

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

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

how can I that with asp classic? I tried something but it's looks ridiculous. is there any easy and professional way?

thanks for all information.

edited Nov 9 at 9:04

Ina Plaksin

1352

asked Nov 9 at 8:55

Deniz Karadeniz

navigation.inc sample:

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

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

there is a class called active. paints the navigation link in blue. when I navigate to link2 page I want to do this

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

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

how can I that with asp classic? I tried something but it's looks ridiculous. is there any easy and professional way?

thanks for all information.

asp-classic

edited Nov 9 at 9:04

Ina Plaksin

1352

asked Nov 9 at 8:55

Deniz Karadeniz

edited Nov 9 at 9:04

Ina Plaksin

1352

asked Nov 9 at 8:55

Deniz Karadeniz

edited Nov 9 at 9:04

Ina Plaksin

1352

edited Nov 9 at 9:04

Ina Plaksin

1352

edited Nov 9 at 9:04

Ina Plaksin

1352

asked Nov 9 at 8:55

Deniz Karadeniz

asked Nov 9 at 8:55

Deniz Karadeniz

asked Nov 9 at 8:55

Deniz Karadeniz

add a comment |

2 Answers
2

active

oldest

votes

up vote
1
down vote

accepted

Add an include in all your pages :

<%

...

%>

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

<%

...

%>

And your nav.asp page :

<%

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

%>

You can simplify your nav.asp page by adding a custom iif function to vbscript

<%

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>

answered Nov 9 at 14:14

DanB

1,3111114

add a comment |

up vote
0
down vote

Use  in the page where you want your navigation page to appear.

navigation.asp:

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

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

And then use some jQuery to automate your "active" or "currentPage" class on links.

<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>

sample home.asp (with all kind of "templates" --- header, footer, functions, etc.):

<% 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>

edited 2 days ago

answered Nov 17 at 22:08

jmalatia

283

New contributor

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53222528%2finclude-file-menu-active-page-colored-link-in-asp%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
1
down vote

accepted

Add an include in all your pages :

<%

...

%>

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

<%

...

%>

And your nav.asp page :

<%

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

%>

You can simplify your nav.asp page by adding a custom iif function to vbscript

<%

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>

answered Nov 9 at 14:14

DanB

1,3111114

add a comment |

up vote
1
down vote

accepted

Add an include in all your pages :

<%

...

%>

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

<%

...

%>

And your nav.asp page :

<%

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

%>

You can simplify your nav.asp page by adding a custom iif function to vbscript

<%

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>

answered Nov 9 at 14:14

DanB

1,3111114

add a comment |

up vote
1
down vote

accepted

Add an include in all your pages :

<%

...

%>

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

<%

...

%>

And your nav.asp page :

<%

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

%>

You can simplify your nav.asp page by adding a custom iif function to vbscript

<%

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>

answered Nov 9 at 14:14

DanB

1,3111114

Add an include in all your pages :

<%

...

%>

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

<%

...

%>

And your nav.asp page :

<%

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

%>

You can simplify your nav.asp page by adding a custom iif function to vbscript

<%

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>

answered Nov 9 at 14:14

DanB

1,3111114

answered Nov 9 at 14:14

DanB

1,3111114

answered Nov 9 at 14:14

DanB

1,3111114

answered Nov 9 at 14:14

DanB

1,3111114

add a comment |

up vote
0
down vote

Use  in the page where you want your navigation page to appear.

navigation.asp:

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

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

And then use some jQuery to automate your "active" or "currentPage" class on links.

<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>

sample home.asp (with all kind of "templates" --- header, footer, functions, etc.):

<% 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>

edited 2 days ago

answered Nov 17 at 22:08

jmalatia

283

New contributor

add a comment |

up vote
0
down vote

Use  in the page where you want your navigation page to appear.

navigation.asp:

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

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

And then use some jQuery to automate your "active" or "currentPage" class on links.

<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>

sample home.asp (with all kind of "templates" --- header, footer, functions, etc.):

<% 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>

edited 2 days ago

answered Nov 17 at 22:08

jmalatia

283

New contributor

add a comment |

up vote
0
down vote

Use  in the page where you want your navigation page to appear.

navigation.asp:

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

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

And then use some jQuery to automate your "active" or "currentPage" class on links.

<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>

sample home.asp (with all kind of "templates" --- header, footer, functions, etc.):

<% 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>

edited 2 days ago

answered Nov 17 at 22:08

jmalatia

283

New contributor

Use  in the page where you want your navigation page to appear.

navigation.asp:

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

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

And then use some jQuery to automate your "active" or "currentPage" class on links.

<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>

sample home.asp (with all kind of "templates" --- header, footer, functions, etc.):

<% 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>

edited 2 days ago

answered Nov 17 at 22:08

jmalatia

283

New contributor

edited 2 days ago

answered Nov 17 at 22:08

jmalatia

283

New contributor

answered Nov 17 at 22:08

jmalatia

283

answered Nov 17 at 22:08

jmalatia

283

New contributor

jmalatia is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk