Make item highlighted if it refers to the selected menu

Asked

Viewed 4,155 times

2

I have the following code

<div class="produtosMenuItens">
    <div class="produtosMenuItensTit bs">Residencial</div>
    <ul class="produtosMenuItensDiplay" style="display: block;">
        <li class="produtosMenuItensLista">ITEM 1</li>
        <li class="produtosMenuItensLista">ITEM 2</li>
    </ul>
</div>
<div class="produtosMenuItensTit">Industrial</div>
<ul class="produtosMenuItensDiplay" style="display: none;">
    <li class="produtosMenuItensLista">ITEM 3</li>
    <li class="produtosMenuItensLista">ITEM 4</li>
</ul>
</div>

Next, there are two menus, when I select ITEM 1, and enter the page in question, I want it to be highlighted, can be adding a class via Jquery, how do I do this?

Jquery is like this:

$(".produtosMenuItensTit").click(function() {
    if($(this).parent().find(".produtosMenuItensDiplay").css('display') == 'none'){
        $(".produtosMenuItensDiplay").css('display','none');
        $(this).parent().find(".produtosMenuItensDiplay").show();
    }
    else{
        $(this).parent().find(".produtosMenuItensDiplay").hide();
    }
});
  • 2

    I could explain your doubt a little better?

  • @Felipeavelar I forgot to post Jquery, already includes there. I want when I click on the Menu, and I want the page to be showing in the LI which item was selected.

2 answers

2

I got!

JQUERY

$("[pagina]").each(function(index,element){
   var link = $(element).attr('pagina');
      if(menu.split(link).length>1){
        $(element).css({'color':'#0093C9','font-weight':'bold'});
}

HTML

<li pagina="paginaSYS" class="produtosMenuItensLista">BLABLABLA</li>

0

If understood well, you can add a class to highlight the element clicked, example:

CSS

 .active {background-color:red;}

Jquery

$('.produtosMenuItensLista').click(function(){
    //remove class active
    $('.produtosMenuItensLista').removeClass('active');
    //adiciona class active ao item clicado
    $(this).addClass('active');
});

Jsfiddle

  • it applies, but it turns out that it loads the page to open the menu right after

  • The menu is also reloaded when clicked?

  • Yes, when I click on the ITEM, it opens the menu, but it is a new page, it loads the page again there.

  • See if this helps, http://andornagy.com/active-class-navigation-menu/, you need to add active class as per active page

  • Got it, I’ll add an answer with my :D solution

  • I’m glad it worked out, :)

Show 1 more comment

Browser other questions tagged

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