Menu item active but no longer works as a link

Navigation
0

A basic question about JQuery more intriguing. The 'li' active 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>
    
asked by anonymous 22.09.2015 / 18:35

2 answers

1

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

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

    
22.09.2015 / 18:57
1

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

To solve this "problem", simply remove e.preventDefault(); from your code, thus: 

 <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 how it works. 

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>
    
22.09.2015 / 18:59
Check if default is followed, JSON and PHP EditText Android Studio