On opening a page, I want button1 to have the active status so that it lights up. (color white) So that it is clear that the content shown underneath the navbar is part of that activated button. After that if I press any of the other navbar buttons I want the default activated button to be off.
I came across the following jquery:
$('aheader1').addClass('active')
however when I add .active in the css this doesn't change anything.
<div class="wrapper">
<div class="small_wrapper1">
<th class="header1"><a id="aheader11" ">Button1</a></th>
<th class="header2"><a id="aheader21" ">Button2</a></th>
<th class="header3"><a id="aheader31">Button3</a></th>
Take a look at this
$('a').click(function() {
$('a').removeClass('active')
$(this).addClass('active')
});
.active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="small_wrapper1">
<span class="header1"><a id="aheader11" >Button1</a></span>
<span class="header2"><a id="aheader21" >Button2</a></span>
<span class="header3"><a id="aheader31">Button3</a></span>
</div>
</div>