Here is my Code on JSFiddle
$('button').click(function() {
$('#passive_order_categories').tab('show');
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<button>Click</button>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a>
</li>
<li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a>
</li>
</ul>
<div class="tab-content">
<div id="active_order_categories" class="tab-pane active">
<div class="panel-body"></div>
</div>
<div id="passive_order_categories" class="tab-pane">
<div class="panel-body"></div>
</div>
</div>
</div>
Can't figure out why is Bootstrap .tab('show') not working for my code.
From Bootstrap#tabs, what the target to trigger is the tab that we clicked to show the contents, not the content itself.
You should give the second tab that links to the passive_order_categories an id, or use ul.nav-tabs li:eq(1)
to get the second li in the list.
Or use a[href="#passive_order_categories"] to get the anchor related to that content page.
Then apply the .tab('show') on it, not on $('#passive_order_categories')
$('button').click(function() {
// Find the target tab li (or anchor) that links to the content you want to show.
$('a[href="#passive_order_categories"]').tab('show');
//$('ul.nav-tabs li:eq(1)').tab('show');
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<button>Click</button>
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a>
</li>
<li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a>
</li>
</ul>
<div class="tab-content">
<div id="active_order_categories" class="tab-pane active">
<div class="panel-body"></div>
</div>
<div id="passive_order_categories" class="tab-pane">
<div class="panel-body"></div>
</div>
</div>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button>Click</button>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
<script>
$('button').click(function() {
// Find the target tab li (or anchor) that links to the content you want to show.
$('a[href="#nav-contact"]').tab('show');
//$('ul.nav-tabs li:eq(1)').tab('show');
});
</script>
</body>
</html>
With my respect to accepted answer (vote for him), here is bootstrap4 working sample.
Related
I can't figure out why
The tabs aren't switching when clicked
The tabs aren't displaying content
I am using electron and bootstrap, i would appreciate if someone had any reccomendations or solutions. I read a few other similar questions however did not find the answer (as far as i know).
A snippet is provided. Thanks
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="app-corners">
<div class="menu-bar">
<ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1-tab" data-toggle="tab" href="#1">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="2-tab" data-toggle="tab" href="#2" >2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="3-tab" data-toggle="tab" href="#3">3</a>
</li>
<li class="nav-item">
<a class="nav-link" id="4-tab" data-toggle="tab" href="#4">4</a>
</li>
</ul>
</div>
<div id="container-fluid">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="1">
</div>
<div class="tab-pane fade" id="2" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="3" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="4" >
<h1>HELLO</h1>
</div>
</div>
</div>
</div>
I hope this one will help you,
please add this link in head tag only.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Because you have not used bootstrap js files. Your code is working fine. Check here
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="app-corners">
<div class="menu-bar">
<ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1-tab" data-toggle="tab" href="#1">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="2-tab" data-toggle="tab" href="#2" >2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="3-tab" data-toggle="tab" href="#3">3</a>
</li>
<li class="nav-item">
<a class="nav-link" id="4-tab" data-toggle="tab" href="#4">4</a>
</li>
</ul>
</div>
<div id="container-fluid">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="1">
</div>
<div class="tab-pane fade" id="2" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="3" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="4" >
<h1>HELLO</h1>
</div>
</div>
</div>
</div>
All i needed to do was update the bootstrap version in the header. Thanks for reading.
Try This:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="menu-bar">
<ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
<li class="active"><a id="1-tab" data-toggle="tab" href="#1">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<br>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="1">
</div>
<div class="tab-pane fade" id="2" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="3" >
<h1>Hello</h1>
</div>
<div class="tab-pane fade" id="4" >
<h1>HELLO</h1>
</div>
</div>
</div>
</body>
</html>
I have a page with 2 tabs.
I want the pills-public tab to display :
PUBLIC BLOCK 1
I want the pills-private tab to display :
PRIVATE BLOCK 2
PRIVATE BLOCK 1
Note that the 2 PRIVATE content are not in the same region.
How to do this ? The code below does not work...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="true">PRIVATE</a>
</li>
</ul>
<div class="region-top">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 2</div>
</div>
</div>
<div class="region-bottom">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-public" role="tabpanel" aria-labelledby="pills-public-tab">PUBLIC BLOCK 1</div>
<div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 1</div>
</div>
</div>
You can't have multiple HTML elements with similar IDs... if you do, only the first one will be picked - we add our custom classes pillsPrivateClass and pillsPublicClass to get around this; class="tab-content" should be used in the code only once; with bootstrap 4 (out of the box) even after re-arranging the elements like i did, 2 tabs wouldn't get toggled with a single click.. so we'd have to use jQuery to toggle/un-toggle any additional divs...
$(document).ready(function() {
$(".nav-link").click(function() {
if ($(this)[0].id == 'pills-private-tab') {
$(".pillsPrivateClass").each(function() {
if ($(this).hasClass('active')) { /* */ } else {
$(this).addClass('active');
$(this).addClass('show');
}
});
$(".pillsPublicClass").each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).removeClass('show');
}
});
} else {
$(".pillsPrivateClass").each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).removeClass('show');
}
});
}
});
})
.pillsPrivateClass:not(.active) {
display: none
}
.pillsPublicClass:not(.active) {
display: none
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
</li>
<li class="nav-item">
<a class="nav-link " id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="false">PRIVATE</a>
</li>
</ul>
<div class="tab-content">
<div class='region-top'>
<div id="pills-private" class=" tab-pane pillsPrivateClass" role="tabpanel" aria-labelledby="pills-private-tab">
PRIVATE BLOCK 2
</div>
</div>
<div class='region-bottom'>
<div id="pills-public" class=" tab-pane pillsPublicClass" role="tabpanel" aria-labelledby="pills-private-tab">
PUBLIC BLOCK 1
<br/>
</div>
<div id="pills-private" class=" tab-pane pillsPrivateClass" role="tabpanel" aria-labelledby="pills-private-tab">
PRIVATE BLOCK 1
</div>
</div>
</div>
In the below snippet I have a collapse which shows if you hover over the second nav-link item. Now I want to use the Grid system inside this collapse but I can't seem to make it work.
What does not work?
The columns just display underneath one another.
How do I use the grid system inside the collapse body?
$(".menu1").hover(
function() {
$('.panel').collapse('show');
}, function() {
$('.panel').collapse('hide');
}
);
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link menu1" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="panel collapse" id="collapseExample">
<div class="card card-body">
<div class="row">
<div class="col-md-6">Test - Column</div>
<div class="col-md-6">Test - Column</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Is this what you want to do?
This is in Bootstrap 3
All I did was wrap your row in a container
Fiddle
when I click on a tab the /#name changes. However, the highlighted tab indicating that it is the active tab does not change. The content also does not change and the content associated with the default tab continues to be displayed.
doctype html
html
head
title Bootstrap Tab this Database
script(src="/socket.io/socket.io.js")
script(src="client.js")
link(rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css")
body
div.container
nav.navbar.navbar-default.navbar-inverse
div.container-fluid
div.navbar-header
button(type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false")
span.sr-only
<!-- Draw two bars in navbar button when the window is small -->
span.icon-bar
span.icon-bar
ul.nav.navbar-nav
<!-- Setup the default active tab -->
li.active
a(href="#db1Tab", data-toggle="tab") DB1
<!-- The tabs on standby -->
li
a(href="#db2Tab", data-toggle="tab") DB2
div.tab-content
div(id="db1Tab").tab-pane.fade.in.active
include db1
div(id="db2Tab").tab-pane.fade
include db2
This example can help you (try it yourself here):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
</div>
</div>
</div>
</body>
</html>
I am trying to create a web page where there is a navigation bar containing three tabs. Each navigation tab contains a web page. I can't seem to display the website when the user clicks the tab. Can someone help me display the various web pages when a user clicks the different tab buttons? Note i am using bootstrap.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('#home').load('home.html');
$('#data').load('data/data.html');
$('#sauce').load('sauce/sauces.html');
</script>
</head>
<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Home</a></li>
<li><a data-toggle="tab" href="#data"> Data </a></li>
<li><a data-toggle="tab" href="#sauce"> Sauce </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container-fluid">
<div class="row">
<div id= "mapContainer" class="col-md-12">
<div id="map-canvas"></div>
</div>
<div id = "panelContainer" class="col-md-3 hidden">
<div id="right-panel"></div>
</div>
</div>
</div>
</body>
</html>
updated code as per your requirement.
//onloading
$("#myTab a").each(function () {
var target = $(this).attr("href");
$(target).load($(this).attr("data-page"))
});
//This is for tab click to load page
/*
$("#myTab a").click(function () {
debugger
var target = $(this).attr("href");
alert($(this).attr("data-page"))
$(target).load($(this).attr("data-page"))
});
*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home" data-page="home.html"> Home</a></li>
<li><a data-toggle="tab" href="#data" data-page="data.html"> Data </a></li>
<li><a data-toggle="tab" href="#sauce" data-page="sauce/sauces.html"> Sauce </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active"></div>
<div id="data" class="tab-pane fade in"></div>
<div id="sauce" class="tab-pane fade in"></div>
</div>