Skip to main content
removeu 221 caracteres do conteúdo
Fonte Link
Lollipop
  • 5mil
  • 2
  • 24
  • 48

O meu exemplo, FUNCIONA, faz um item de menu ativo com base na URL atual com jQuery:

[NÃO VAI FUNCIONAR AQUI POR CONTA DA URL, QUE NÃO MUDARÁ]Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function($){
        // Get current url
        // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
        var url = window.location.href;
        $('.menu a[href="'+url+'"]').addClass('current_page_item');
    });
</script>
$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}
a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:AUTO;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
    <ul class="nav">
        <li><a href="#">INÍCIO</a>
        </li>
        <li>|</li>
        <li><a href="#">MISSÃO</a>
        </li>
        <li>|</li>
        <li><a href="#">QUEM SOMOS</a>
        </li>
        <li>|</li>
        <li><a href="#">PESQUISADORES</a>
        </li>
    </ul>
</header>
Style:

 
<style type="text/css">
a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:AUTO;
    float:left;
}


</style>

HTML

<header>
<div class="menu">
    <ul class="nav">
        <li><a href="#">INÍCIO</a>
        </li>
        <li>|</li>
        <li><a href="#">MISSÃO</a>
        </li>
        <li>|</li>
        <li><a href="#">QUEM SOMOS</a>
        </li>
        <li>|</li>
        <li><a href="#">PESQUISADORES</a>
        </li>
    </ul>
</div>    
</header>

O meu exemplo faz um item de menu ativo com base na URL atual com jQuery:

[NÃO VAI FUNCIONAR AQUI POR CONTA DA URL, QUE NÃO MUDARÁ]

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}
a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:AUTO;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
    <ul class="nav">
        <li><a href="#">INÍCIO</a>
        </li>
        <li>|</li>
        <li><a href="#">MISSÃO</a>
        </li>
        <li>|</li>
        <li><a href="#">QUEM SOMOS</a>
        </li>
        <li>|</li>
        <li><a href="#">PESQUISADORES</a>
        </li>
    </ul>
</header>

 

O meu exemplo, FUNCIONA, faz um item de menu ativo com base na URL atual com jQuery:

Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function($){
        // Get current url
        // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
        var url = window.location.href;
        $('.menu a[href="'+url+'"]').addClass('current_page_item');
    });
</script>
Style:

<style type="text/css">
a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:AUTO;
    float:left;
}


</style>

HTML

<header>
<div class="menu">
    <ul class="nav">
        <li><a href="#">INÍCIO</a>
        </li>
        <li>|</li>
        <li><a href="#">MISSÃO</a>
        </li>
        <li>|</li>
        <li><a href="#">QUEM SOMOS</a>
        </li>
        <li>|</li>
        <li><a href="#">PESQUISADORES</a>
        </li>
    </ul>
</div>    
</header>
Fonte Link
Lollipop
  • 5mil
  • 2
  • 24
  • 48

O meu exemplo faz um item de menu ativo com base na URL atual com jQuery:

[NÃO VAI FUNCIONAR AQUI POR CONTA DA URL, QUE NÃO MUDARÁ]

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}
a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:AUTO;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
    <ul class="nav">
        <li><a href="#">INÍCIO</a>
        </li>
        <li>|</li>
        <li><a href="#">MISSÃO</a>
        </li>
        <li>|</li>
        <li><a href="#">QUEM SOMOS</a>
        </li>
        <li>|</li>
        <li><a href="#">PESQUISADORES</a>
        </li>
    </ul>
</header>