Active menu item but no longer works as link

Asked

Viewed 102 times

0

a basic question about Jquery but intriguing. Active li in menu. This logic I used works. However, the 'a' tag loses its main feature which is a link to the other pages.

<html>
<head>
 <style type="text/css">
    li.ativa{ color:#f00; }
 </style>
</head>
<body>
  <ul class="menu">
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Item 3</a></li>
 </ul>
</body>
</html>
<script>

$("ul.menu li:nth(0)").addClass("ativa"); //Primeiro item selecionado.
$("ul.menu li").click(function(e){
    e.preventDefault();
    $("ul.menu li").removeClass("ativa");
    $(this).addClass("ativa");
});
</script>
jquery

  • This HTML comes from the right server, can you make this class change on the server? or via url? otherwise you have to check in javascript the url with the link and it’s kind of bad :)

  • Are links even or you will perform the operation by jquery tb? look here the example I set... see if this is it

  • Sergio. When I remove e. preventDefault();' the anchor links to other pages come back to work, as you explained. Only they lose the 'active' property when we click on one of them.

2 answers

1

This happens due to e.preventDefault() added in the function of Callback of click. That one preventDefault() prevents the click event from performing its standard procedures, such as submitting an HTML form, or following the address of a link in an element <a>.

More about preventDefault can be read here. (In English).

1

In your script you are using the e. preventDefault(); which serves to prevent the default event from occurring, in your case, going to other pages.

To resolve this "problem", simply remove the e.preventDefault(); of your code, so:

 <script>
    $("ul.menuNovo li:nth(0)").addClass("ativa"); //Primeiro item selecionado.

    $("ul.menuNovo li").click(function(e){
        $("ul.menuNovo li").removeClass("ativa");
        $(this).addClass("ativa");
    });
</script>

See your code working on Fiddle.

In this answer you have an excellent explanation of its functioning.

li.ativa{ color:#f00; }
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by randrade</title>
  
  
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
  
  
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type="text/css">
    li.ativa{ color:#f00; }
  </style>
  



<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$("ul.menuNovo li:nth(0)").addClass("ativa"); //Primeiro item selecionado.
$("ul.menuNovo li").click(function(e){
    $("ul.menuNovo li").removeClass("ativa");
    $(this).addClass("ativa");
});
});//]]> 

</script>

</head>
<body>
  <p>Menu Redirecionando</p>
 <ul class="menuNovo">
   <li class="ativa"><a href="#item1">Item 1</a></li>
   <li><a href="#item2">Item 2</a></li>
   <li><a href="#item3">Item 3</a></li>
 </ul>

<div id="item1">
    <h1>Item 1</h1>
    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.

Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.

Casamentiss faiz malandris se pirulitá, Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer Ispecialista im mé intende tudis nuam golada, vinho, uiski, carirí, rum da jamaikis, só num pode ser mijis. Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</p>
</div>

<div id="item2">
    <h1>Item 2</h1>
    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.

Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.

Casamentiss faiz malandris se pirulitá, Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer Ispecialista im mé intende tudis nuam golada, vinho, uiski, carirí, rum da jamaikis, só num pode ser mijis. Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</p>
</div>

<div id="item3">
    <h1>Item 3</h1>
    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.

Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.

Casamentiss faiz malandris se pirulitá, Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer Ispecialista im mé intende tudis nuam golada, vinho, uiski, carirí, rum da jamaikis, só num pode ser mijis. Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
  




</body></html>

  • I removed e.preventDefault(); and went back to square one. Active item no longer works.

  • The link is referencing what? A page html, one âncora, one website?

  • An anchor on the website.

  • I edited the answer. See if it helps you.

  • It works perfectly your code. Mine doesn’t work. I’m using require_once(toposite.php); and require_once(rodape.php); they only change the content of the pages. The clicked link is not active using the same code there.

  • Put your script within the tag body and testing.

Show 1 more comment

Browser other questions tagged jquery

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