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

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>
Lollipop
  • 5mil
  • 2
  • 24
  • 48