jQuery menu active link

Question

Hello, I am trying to make a jquery menu that when I click on one of the links (without reloading the page), it changes its class to "active" and removes this class when I click on another link.

here is my code :

<script type="text/javascript">
$(document).ready(function() {
  $(".buttons").children().("a").click(function() {
    $(".buttons").children().toggleClass("selected").siblings().removeClass("selected");
  });
});
</script>


  <ul class="buttons">
    <li><a class="button" href="#">Link1</a></li>
    <li><a class="button" href="#">Link2</a></li>
    <li><a class="button" href="#">Link3</a></li>
    <li><a class="button" href="#">Link4</a></li>
  </ul>

Can someone tell me why my code is not working and how to fix it? Thanks :)

Answer 1

$(document).ready(function() {
  $(".buttons a").click(function() {
    $(".buttons a").removeClass("selected");
    $(this).addClass("selected"); 
  });
});

Answer 2

I would change:

$(".buttons").children().toggleClass("selected").siblings().removeClass("selected");

to

$("this").addClass('selected').siblings().removeClass("selected");

Answer 3

The original code failed because this syntax is invalid:

.children().("a")

The rest of the code also had some fundamental flaws. Try this instead:

$(function(){
  $(".buttons a").click(function(){
    $(this).parent().addClass('selected'). // <li>
      siblings().removeClass('selected');
  });
});

In this correction, the class selected is applied to an <li> -- not an <a> to give you better flexibility while writing CSS.

Answer 4

Greetings,

Followed the above, however I'm unable to get the end result. The li item which is currently selected has no background. On click i have anchor placed within the same html page (page url doesn't change)

I want to create something like this image example image

Thanks for you kind help.

Regards

enter code here The HTML

<link  rel="stylesheet" type="text/css" href="screen.css"/>

<script type="text/javascript">
$(document).ready(function() {
  $(".buttons a").click(function() {
    $(".buttons a").removeClass("selected");
    $(this).addClass("selected"); 
  });
});



</script>

 <div id="side-bar">
 <ul class="buttons">
    <li><a class="button" href="#tier1">Link1</a></li>
    <li><a class="button" href="#tier2">Link2</a></li>
    <li><a class="button" href="#tier3">Link3</a></li>
    <li><a class="button" href="#tier4">Link4</a></li>
  </ul>
  </div>
   <div id="content">
   <a name="tier1" /><h4>Tier 1</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nibh nec augue condimentum feugiat vitae in arcu. Quisque condimentum, est sit amet dictum pulvinar, dui nulla laoreet dui, ut consequat est massa vel massa. Pellentesque ultricies pharetra convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
   <a name="tier2" /><h4>Tier 2</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nibh nec augue condimentum feugiat vitae in arcu. Quisque condimentum, est sit amet dictum pulvinar, dui nulla laoreet dui, ut consequat est massa vel massa. Pellentesque ultricies pharetra convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent tristique diam dapibus ante pulvinar ut sagittis tellus ornare.</p><p>Lorem ipsum dolor sit amet, </p>
   <a name="tier3" /><h4>Tier 3</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nibh nec augue condimentum feugiat vitae in arcu. Quisque condimentum, est sit amet dictum pulvinar, dui nulla laoreet dui, ut consequat est massa vel massa. Pellentesque ultricies pharetra convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent tristique diam dapibus ante pulvinar ut sagittis tellus ornare.</p><p>Lorem ipsum dolor sit amet, </p>
   <a name="tier4" /><h4>Tier 4</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nibh nec augue condimentum feugiat vitae in arcu. Quisque condimentum, est sit amet dictum pulvinar, dui nulla laoreet dui, ut consequat est massa vel massa. Pellentesque ultricies pharetra convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent tristique diam dapibus</p>
   </div>

THE CSS
#side-bar{
 position:relative;
 top:0;
 left:0;
 float:left;
 width:200px;
 }
#content{
 position:relative;
 top:0;
 left:0;
 float:left;
 width:500px;
 margin:0px 20px;
 }
ul.buttons{
 list-style:none;
 background: #ff0;
 }
.button {
 display:block;
 border-bottom:1px dotted #ccc;
 padding:10px;
 }
a:link, a:visited{
 color:#000;
 }
a.selected:link{
 color:#000;
 text-decoration: none;
 background:#ff0000;
 }
a:hover{
 text-decoration: none;
 }