3

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!

Improve this question
2
  • 1
    One question per question please. Commented Oct 10, 2015 at 22:47
  • Try reading the selectors section of the jQuery API for first problem. For the second, toggle class on active .. again look at methods in jQuery API Commented Oct 10, 2015 at 22:48

3 Answers 3

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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');
});
Improve this answer

2 Comments

You don't need find. .navigation a means only anchors that are children of .navigation
You're obviously right - but i wanted to show how he can loop for something inside something :)
0

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">
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.