Add class to next item

by Ivan Gerasimenko

HTML

<section id="nav">    
        <li><a class="nav" href="People.html">People</a></li>
        <li><a class="nav" href="Tourist.html">Tourist</a></li>
        <li><a class="nav" href="Joints.html">Joints</a></li>
        <li><a class="nav" href="Project.html">Project</a></li>
        <li><a class="nav" href="Products.html">Products</a></li>
        <li><a class="nav" href="cafes.html">cafes</a></li>
</section>

CSS

#nav .activeTab{
background:#FFFF00 !important;
color:#000 !important;
}

#nav{
width:100%;
text-align:center;
min-width:1300px;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}

#nav li{
display:inline;
}

#nav .nav{
display:inline-block;
background-color:#000;
color:#FFF;
font-family: 'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}

#nav .nav:hover{
background:#FFFF00;
color:#000;
}

.active{
background:#FFFF00;
color:#000;
}

JavaScript

$(function() { 
    $('#nav').on('click','.nav', function ( e ) {
        e.preventDefault();
        $(this).parents('#nav').find('.active').removeClass('active').end().end().addClass('active');
        $(activeTab).show();
    });
    
    $('.nav').on('click', function() {
        var $this = $(this);
        var parentWrapper = $($this.parent()[0]);
        var childNextItem =$(parentWrapper.next('li').find('a')[0]);
        childNextItem.addClass('activeTab');
    });
    
});