I am trying to make my navigation bar clickable. For example when a user clicks data a data web page opens up. But in my code I am unable to do so. When I click the tab button nothing happens. Can someone help me so that when I click the tab button shows the content? Note I am using bootstrap nav-nav tab bar Below is my code below:-
<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="">
<title>Sales</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="persons/data.html"> data </a></li>
<li><a data-toggle="tab" href="teams/teamI.html"> teams </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>
<!-- /.container -->
<div class="container">
<hr>
</div>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can make it simpler like below. But if you wanted to load another html into specific tabs then use jquery.
<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"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
Update: You can also add html inside your tabs using jQuery load
function.
Code looks like this:
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
<script>
$('#home').load('/home.html');
$('#data').load('/data.html');
$('#teams').load('/teams.html');
</script>
Related
I'm trying to make the user profile icon clickable to show the user info (email address) and logout in bootstrap/html. Does anyone know how to do this in bootstrap or html like it is done here in an example using angular materials.
User Profile Icon Screenshot
Here is a codepen and snippet of what I currently
Codepen
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,no-store" />
<meta http-equiv="expires" content="0" />
<title>AZDOE: Core Demo</title>
<link rel="stylesheet" href="https://design.linq.com/10.4.0/vendors/angular-material-
theme.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/storybook/angular/assets/linq-
snackpaq-core.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/theme/blueberry-muffin.css">
<link rel="stylesheet" href="../css/design-system-overrides/stylesheet.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css"
integrity="sha384-TxKWSXbsweFt0o2WqfkfJRRNVaPdzXJ/YLqgStggBVRREXkwU7OKz+xXtqOU4u8+"
crossorigin="anonymous">
<link rel="stylesheet" href="../styles/master_common.css">
<link rel="stylesheet" href="../styles/master_760.css">
<link rel="stylesheet" href="../css/select2.css">
<link rel="stylesheet" href="../css/core2.css">
</head>
<body class="loggedin">
<div class="site-wrapper">
<!-- HEADER -->
<header id="header">
<nav class="navbar navbar-expand-lg mb-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#sidebar-
wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle
navigation">
<span class="material-icons">menu
</span>
</button>
<a href='/' class="navbar-brand">
<img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
</a>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select SFA</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select Program Year</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="Div1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<i class="fas fa-search"></i>
</li>
<li class="nav-item rounded-icon">
<a href="#" class="nav-link" title="Settings"><i class="fas fa-user"></i><b
class="caret"></b></a>
</li>
</ul>
</div>
</nav>
</header>
<!-- SPONSOR INFO SECTION -->
<main role="main" id="main">
<div id="wrapper">
<!-- SIDEBAR -->
<div id="sidebar-wrapper" class="sb-wrapper collapse">
<i class="fas fa-chevron-circle-left"></i>
<div class="list-wrapper">
<div class="nav-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#" v-b-tooltip.hover.right title="Entity Manager">
<div> Entity Manager</div>
</a>
</li>
.....
</div>
</div>
<!-- CONTENT -->
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="midcol-nslp" class="p-3">
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</main>
<footer class="mt-auto fixed-bottom">
<div class="container-fluid py-2">
<div class="row">
<div class="col text-center small">
© 2020 Colyar Technology Solutions, LLC. All rights reserved.
</div>
<div class="text-sm-center text-md-right d-flex justify-content-end align-items-center">
<ul class="nav">
<li class="nav-item">
<a href="mailto:info#colyar.com?subject=Website Test"><i class="fas fa-envelope-
open-text" data-toggle="tooltip" data-placement="top" title="Contact Support"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<script src="../JS/app.js"></script>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
document.getElementById("datetime").innerHTML = formatAMPM();
function formatAMPM() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() :
d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months =
['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+'
'+d.getFullYear()+' '+hours+':'+minutes+ampm;
}
</script>
</body>
</html>
Hopefully this is enough to help with what I'm trying to do.
You would want a single button dropdown, but and put your userinfo and logout inside the div and set the image icon style in the button instead.
https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns
Here is some sample code to get you started with.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="user-icon"></i></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="info-header">Profile</div>
<div class="user-email">richard.belding#bayside-hs.com</div>
<button class="btn btn-primary>Logout</button
</div>
</div>
I had a bootstrap card using tab headers that was working perfectly.
I added some javascript files to update things, especially for a datetimepicker I'm using, and since then I'm having tab issues. Currently, I have my first tab (Instagram) active on default. Now when I click another tab, it becomes active and instagram remains active. No matter what, it shows the active tab and the previously activated tab as both being active.
Here's the head with the up to date CDN files:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js" type="text/javascript"></script>
and the html:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item active">
<a data-toggle="tab" class="nav-link active" href="#instagram">Instagram</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#twitter">Twitter</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#facebook">Facebook</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div id="instagram" class="tab-pane fade show active">
<div id="instafeed"></div>
</div>
<div id="twitter" class="tab-pane fade">
twitter
</div>
<div id="facebook" class="tab-pane fade">
facebook
</div>
</div>
</div>
</div>
Please Check Below Fiddle
Fiddle
Remove active class from <li> tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a data-toggle="tab" class="nav-link active" href="#instagram">Instagram</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#twitter">Twitter</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#facebook">Facebook</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div id="instagram" class="tab-pane fade show active">
<div id="instafeed"></div>
</div>
<div id="twitter" class="tab-pane fade">
twitter
</div>
<div id="facebook" class="tab-pane fade">
facebook
</div>
</div>
</div>
</div>
As far as I can see I've followed a w3 example exactly regarding bootstrap tabs (https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp). However with my following code, the tabs don't change when clicked. The only tab displayed is the active tab. I'm not hugely familiar with bootstrap so I imagine the solution may probably be simple.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/login.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<!-- <div id="tabs" class="container"> -->
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#student">Student</a>
</li>
<li>
<a data-toggle="tab" href="#employee">Employee</a>
</li>
<li>
<a data-toggle="tab" href="#admin">Admin</a>
</li>
</ul>
<div class="tab-content">
<div id="student" class="tab-pane fade in active">
<h1>TEST</h1>
</div>
<div id="employee" class="tab-pane fade">
<h1>TEST2</h1>
</div>
<div id="admin" class="tab-pane fade">
<h1>TEST3</h1>
</div>
</div>
<!-- </div> -->
</div>
</body>
</html>
The example from W3 is not working either! Try this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/login.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
TEST 1
</div>
<div role="tabpanel" class="tab-pane" id="profile">
TEST 2
</div>
<div role="tabpanel" class="tab-pane" id="messages">
TEST 3
</div>
<div role="tabpanel" class="tab-pane" id="settings">
TEST 4
</div>
</div>
</div>
</body>
</html>
And check: https://getbootstrap.com/docs/3.3/javascript/#tabs for more information
EDIT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
This line must go before bootstrap.min.js, like this:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
This is first time that my bootstrap tabs is not working my code is simple and everything looking OK but on my system it's not working.
Following is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Add data-toggle="tab" to anchor
<!DOCTYPE html>
<html lang="ENG">
<head>
<!-- Required meta tags always come first-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a data-toggle="tab" href="#home" class="nav-link active">Active 1</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#profile" class="nav-link">Active 2</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#message" class="nav-link">Active 3</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#settings" class="nav-link">Disabled</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">home</div>
<div class="tab-pane fade" id="profile">profile</div>
<div class="tab-pane fade" id="message">messages</div>
<div class="tab-pane fade" id="settings">settings</div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</body>
</html>
I am trying to develop an incident management and was creating a page using bootstrap. I have taken the example from bootstrap dynamic tabs
The issue is that when I am clicking on the menus it is not working. It is not showing the content for the menus
<!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="bootstrap-3.3.4-dist/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap-3.3.4-dist/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>
<p>Incidents</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Incident 1</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Incident 2</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Incident 3</p>
</div>
</div>
</div>
</body>
</html>
Please help me out guys!!!!
1st test your code with:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
this should work:
<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>
<p>Incidents</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Incident 1</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Incident 2</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Incident 3</p>
</div>
</div>
Check out your links I just copy your code to a jsfiddle and it works fine I added to jsfiddle the correct links:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Check out the working jsfiddle http://jsfiddle.net/Yandy_Viera/y4khsn3q/
I have encountered similar issue. The cause of it is because I added an onclick event to the nav as follows for my header menu bar.
$(".nav a").on("click", function(){ ... });
After I changed the line to
$(".navbar-nav a").on("click", function(){ ... });
the pills start to work again.