Jquery tabbed navigation

Question

Violet_82 89 Posting Whiz in Training

10 Years Ago

Hello guys,
A few days ago I was looking on the net for a good jquery tabbed navigation – I needed it for a project – and I have to say that what I found wasn’t really what I was hoping for. An awful lot of people seem to be using plug-in (nothing wrong with that but I try to avoid them unless it is absolutely necessary), others had hundreds lines of script instead (I try to avoid that too). So not terribly satisfied with the results of my search, I thought I’d try to build one myself, using as little code as I could. Well, it turned out it wasn’t as difficult as I thought it would be. My JS is only 18 lines long which makes it very good for beginners (there are lots of comments)! So I thought it might be a good idea to share this with the community in case you are like me and you look for a very very simple, non-plug-in, tabbed navigation solution. Feel free to expand it and do whatever you want with it.
HTML:

<!DOCTYPE html>
<html>
<head>
<title>Tab test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="smallBoxWrapper">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="clear"></div>
</div>
<div class="tabbedMenu">
<ul>
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
<li><a href="#">Tab 5</a></li>
<li><a href="#">Tab 6</a></li>
<li><a href="#">Tab 7</a></li>
<li><a href="#">Tab 8</a></li>
</ul>
<div class="clear"></div>
<div class="tabContent active">
<h1>This is tab 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>

<div class="tabContent">
<h1>This is tab 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>

<div class="tabContent">
<h1>This is tab 3</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>

<div class="tabContent">
<h1>This is tab 4</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>

<div class="tabContent">
<h1>This is tab 5</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>

<div class="tabContent">
<h1>This is tab 6</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>

<div class="tabContent">
<h1>This is tab 7</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>

<div class="tabContent">
<h1>This is tab 8</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>               

</div>
</div>   
</body>
</html>

CSS

body{
    background-color:grey;
}
.wrapper{
    width:1024px;
    background-color:white;
    min-height:600px;
    margin:0 auto;
}
.smallBox{
    width:230px;
    height:150px;
    background-color:red;
    margin-right:10px;
    float:left;
}
.clear{
    clear:both;
}
.smallBoxWrapper{
    width:960px;
    margin:0 auto;
    padding-top:20px;
    padding-bottom:40px;
}
.tabbedMenu{
    padding-left:20px;
    padding-right:20px;
}
.tabbedMenu ul{
    list-style-type:none;
     margin: 0;
    padding: 0;
}
.tabbedMenu ul li a{
    text-decoration:none;
    padding:5px 15px;
    display:block;
}
.tabbedMenu ul li{
    float:left;
    margin-right:2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* background:url("tab.jpg") no-repeat 0 0; */
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);

    /* SVG as background image (IE9/Chrome/Safari/Opera) */ 
/* background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcxMzYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwQTNFRiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzEzNikiIC8+Cjwvc3ZnPg==); */

    /*for IE*/
    filter:progid:dximagetransform.microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#00A3EF',GradientType=0);

}
.tabContent h1{
    margin:0;
}
.tabContent{
    background-color:#76f597;
    padding:15px;
    display:none;
}
.tabContent.active{
    display:block;
}
.tabContent p{
    margin:0;
}
.tabbedMenu ul li.active{
    filter:progid:dximagetransform.microsoft.gradient(enabled=false);
    background: none no-repeat #76F597;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}

JS

$(document).ready(function(){
//alert("ohi");
var $allTabs = $(".tabbedMenu ul li");//all the tabs
var $allTabContent = $(".tabContent");//all the respective content
var activeIndex;
$allTabs.click(function(){//when a tab is clicked on
$allTabs.removeClass("active");//remove class active from any tab
$(this).addClass("active");//add class active to the clicked tab        
$allTabs.each(function(index){
if($(this).hasClass("active")){//find the tab with active tab
activeIndex = index;//get its position 
console.log("the index is " + activeIndex );
$allTabContent.removeClass("active");//remove active class from all content containers
$(".tabContent").eq(activeIndex).addClass("active");//add class active to the container that matches the index of the tab
}           
});
});
});

javascript jquery

2 Contributors
2 Replies
181 Views
1 Hour Discussion Span
Latest Post 10 Years Ago Latest Post by Violet_82

iamthwee

10 Years Ago

Depends whether you are doing this for merely learning purposes. If not use a framework. This is absolutely the best course of action. Something like twitter bootstrap or skeleton comes with full examples and are responsive to boot.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Violet_82 89 Posting Whiz in Training · Answer 1 · 2014-02-03T09:42:49+00:00

hello iamthwee, thanks for that. Everything I do, I do it for learning purposes whether it's a project or a test. If it's worked related I do with the learning hat on too, so I guess my point of view is a bit askew. Yes, you're right, there are frameworks available, but using a framework or even a plugin are at times (and depending on the constraints of a project) not the best course of action. Personally, if I can, I prefer to build things myself, at least I know I am in full control of what I did. This - as I have often found out - is not necessarily the case with frameworks and the like. That said, I do not want to diminsh the importance of pre-built solutions - I have used them myself a few times - but sometimes you want something absolutely basic, with not so many options to choose from. So, these are the kind of situations when this sort of code might be handy.