Active class in the menu using include in Asp

Asked

Viewed 254 times

0

On my Asp pages I use a include to call a file that contains my menu:

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

Menu file:

<!DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" type="image/x-icon" href="img/fav-ico.gif" />
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>  
        <div class="container">
            <div id="topo">
                <div id="logo">
                    <img src="img/logo.png" alt="">
                </div>
                <ul class="nav nav-tabs">
                    <li><a href="index.asp">Apresentação</a></li>
                    <li><a href="membros.asp">Membros</a></li>
                    <li><a href="legislacao.asp">Legislação</a></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Notícias<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="noticias2016.asp">2016</a></li>
                            <li><a href="noticias2015.asp">2015</a></li>
                            <li><a href="noticias2014.asp">2014</a></li>
                            <li><a href="noticias2013.asp">2013</a></li> 
                            <li><a href="noticias2012.asp">2012</a></li> 
                            <li><a href="noticias2011.asp">2011</a></li> 
                            <li><a href="noticias2010.asp">2010 e anteriores</a></li> 
                        </ul>
                    </li>
                    <li><a href="acoes.asp">Ações</a></li>
                    <!--<li><a href="sugestoes.asp">Sugestões</a></li>-->
                    <li><a href="atas.asp">Atas</a></li>
                    <li><a href="apresentacoes.asp">Apresentações</a></li>
                    <li><a href="links.asp">Links</a></li>
                </ul>
            </div>

How do I insert the active class only in the accessed menu?

css asp bootstrap

1 answer

1


You can add this JS at the end of this page that you are giving a include:

url = document.location.pathname.substr(document.location.pathname.lastIndexOf("/") + 1); // Pega o nome da página atual, ex: teste.html

el = document.querySelector("[href*='" + url + "']"); // procura o link que contenha a url
li = el.parentElement.classList.add("active"); // adiciona a classe no li

  • It worked! Thank you very much!!

  • Good, mark it as an answer for other people who have the same problem as yours! ;)

  • how do I do it? rs

  • Just click on the " " below the Positive/Negative arrows.

Browser other questions tagged css asp bootstrap

You are not signed in. Login or sign up in order to post.