CODEWITHSUNDEEP
jqueryhtmlcssnavigationnavbar
Nathan Wilson
Nathan Wilson

Reputation: 179

Active class on an element (Navbar)

I've been working on a navbar and struggling to get my head around some jQuery that I received.

I will post my code below, and a link to a codepen (https://codepen.io/JustNayWillo/pen/aXpKbb) so that you can get a better understanding.

HTML:

<div id="navbar">

    <li class="tab">

        <a class="link active" href="#home">
            <div class="text">Home</div>
        </a></li>

    <li class="tab">

        <a class="link" href="#work">
            <div class="text">Work</div>
    </a></li>

    <li class="tab">

        <a class="link" href="#about">
            <div class="text">About</div>
    </a></li>
</div>

CSS:

#navbar {
  position: absolute;
  text-align: right;
  top: 3.5em;
  right: 3.5em;
  z-index: 2;
  list-style-type: none;
}

.tab {
  background-color: white;
  opacity: 0.3;
  height: 3.5em;
  width: 0.2em;
  margin-bottom: 1em;
}

.active, .tab:hover {
  opacity:1;
  transition:0.7s ease;
}

.active, .link:hover {
  opacity:1;
  transition:0.7s ease;
}

.active, .text:hover {
  opacity:1;
  transition:0.7s ease;
}

JS / jQuery:

$(function() {
    var links = $('.tab > .link');
    links.on('click', function() {
        links.closest('.tab').removeClass('active');
        $(this).closest('.tab').addClass('active');
    });
});

Everything works well, however the navigation doesn't start with an active class, I'd like 'Home' to be active at start. The other issue is that the text doesn't stay active, only shown on hover over, i'd like this to stay opacity: 1 when active.

Thanks guys.

Upvotes: 0

Views: 970

Answers (2)

Balwinder
Balwinder

Reputation: 82

Add this css in style

.active .text{
  opacity:1;
}

Update html

<div id="navbar">

<li class="tab active">

    <a class="link active" href="#home">
        <div class="text">Home</div>
    </a></li>

<li class="tab">

    <a class="link" href="#work">
        <div class="text">Work</div>
</a></li>

<li class="tab">

    <a class="link" href="#about">
        <div class="text">About</div>
</a></li>

update script

 $(function() {
     var links = $('.tab > .link');
    links.on('click', function() {
       $('#navbar').find('.active').removeClass('active');
       $(this).closest('.tab').addClass('active');
       $(this).closest('.link').addClass('active');
    });
 });

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add This CSS

.text:hover, .active .text {
  opacity:1;
  transition:0.7s ease;
}

HTML Changes

Add Active class on a tab

<li class="tab active">

https://codepen.io/anon/pen/yZgExB

Upvotes: 2

Related Questions