Adding class or CSS:active using javascript

Question

I need some help with both JS and CSS. I am using JS to hide and show subsections from one specific navigation bar on the website. First problem is, that I would like the JS code to specifically only work for that navigation bar and not the many others on the same site. Below is the JS code:

        $('a').click(function(){
            $('section').hide();
            $($(this).attr('href')).show();
        }); 

And below is the HTML code. I was wondering if I could somehow use the "navigation" class to select only this navigation bar in the JS code?

<ul class="navigation">
    <li class="link"><a href="#content1">Tab1</a></li>
    <li class="link"><a href="#content2">Tab2</a></li>
    <li class="link"><a href="#content3">Tab3</a></li>
</ul>

Next problem has to do with the CSS. I would like to have the #content1, Tab1 be default when the site loads - and would like to have the text in it set to a color that is different from the rest (red or whatever). When tab2 is selected I would like that to change color while tab1 switches to black like the others etc. However I can't get the :active method to work in CSS (I guess because the JS really doesn't set it active.) Can anybody help me with that? Below is my CSS code (not all is relevant).

section {
    display: none;
}

section:first-of-type {
    display:block;
}

.navigation {
    list-style: none;
}

li {
    display: inline-block;
}

.nav2 {
    display: inline-block;
    width: 100px;
    margin-right: 25px;
    margin-bottom: 25px;
    padding: 5px 5px 5px 5px;
    background-color: #ffffff;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

Thank you very much in advance!

Answer 1

Create a CSS class that will be in charge of styling the active element. For this example we will use the class .active. It's important to notice that this is not a Pseudo-Class.

We will use a simple HTML markup for the tabs:

<ul class="tabs">
  <li>
    <a href="#">my tab</a>
  </li>
</ul>

Here follows a minimalist example of a tab style:

.tabs a { // represents the tabs
  border: 1px solid #000;
}

.tabs a.active { // represents the active tabs
  background: #f00;
}

Next step is creating a script to handle the clicks on the tabs. We want the script to remove the class .active from every other tabs and assign it to the tab that just got clicked. For that we can create an script that looks like:

$('.tabs').on('click', 'a', function () {

    var $this = $(this), $ul = $this.parents('ul');

    $ul.find('a').removeClass('active');

    $this.addClass('active');

});

Example

$('.tabs').on('click', 'a', function() {

  var $this = $(this),
    $ul = $this.parents('ul');

  $ul.find('a').removeClass('active');

  $this.addClass('active');

});

body {
  margin: 25px;
}
ul.tabs {
  margin: 0 0 30px 0;
  padding: 0;
  list-style: none;
}
ul.tabs li {
  display: inline-block;
}
ul.tabs li a {
  margin: 0 2px;
  padding: 5px 10px;
  box-shadow: 0 0 4px rgba(0, 0, 0, .4);
  text-decoration: none;
  background: #eee;
  color: #888;
  text-transform: uppercase;
  border-radius: 4px;
}
ul.tabs li a:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, .4), 0 0 8px rgba(0, 0, 0, .8);
}
ul.tabs li a.active {
  background: #aaa;
  color: #fff;
}

<ul class="tabs">
  <li>
    <a href="javascript:void(0)">tab 1</a>
  </li>
  <li>
    <a class="active" href="javascript:void(0)">tab 2</a>
  </li>
  <li>
    <a href="javascript:void(0)">tab 3</a>
  </li>
  <li>
    <a href="javascript:void(0)">tab 4</a>
  </li>
  <li>
    <a href="javascript:void(0)">tab 5</a>
  </li>
</ul>

<ul class="tabs">
  <li>
    <a href="javascript:void(0)">tab 1</a>
  </li>
  <li>
    <a class="active" href="javascript:void(0)">tab 2</a>
  </li>
  <li>
    <a href="javascript:void(0)">tab 3</a>
  </li>
  <li>
    <a href="javascript:void(0)">tab 4</a>
  </li>
  <li>
    <a href="javascript:void(0)">tab 5</a>
  </li>
</ul>

<ul class="tabs">
  <li>
    <a href="javascript:void(0)">tab 1</a>
  </li>
  <li>
    <a class="active" href="javascript:void(0)">tab 2</a>
  </li>
  <li>
    <a href="javascript:void(0)">tab 3</a>
  </li>
  <li>
    <a href="javascript:void(0)">tab 4</a>
  </li>
  <li>
    <a href="javascript:void(0)">tab 5</a>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Answer 2

jQuery selection strings use the same syntax as CSS. Therefore to select only anchor tags that are children of navigation, you can use descendent selectors.

$('.navigation a')

And for your CSS issue, no need to use the :active selector. Simply add or remove classes to your target element.

$('.navigation a').click(function () {
  // make tabs default color
  $('.navigation a').removeclass('fancy-colors')

  // make clicked tab fancy
  $(this).addClass('fancy-colors')
})

Check out the jQuery toggleclass docs http://api.jquery.com/toggleclass/

Setting default on page load simply means adding your class in the markup.

<a class="fancy-colors">

Answer 3

Ok so lets cover css first
If you want link be active by default just modify it to

<ul class="navigation">
<li class="link"><a href="#content1" class="active">Tab1</a></li>
<li class="link"><a href="#content2">Tab2</a></li>
<li class="link"><a href="#content3">Tab3</a></li>

and then style it with css

.active { your css } 

And then you can handle rest via JS , use .find to select element only in navigation and .addClass and .removeClass to change a to active

$(".navigation a").click(function() {
$(".navigation").find('a').removeClass('active');
$(this).addClass('active');
});