I'm trying to make a bootstrap site with nav-tabs navigation. I cant seem to figured out why my tabs do not load the content in its tab-pane. I can get it to work in a tutorial but on on my project. Any help would be appreciated. I just wanted the tabbed content to appear when i click its link. Currently its staying on the first tab and it doesn't move. thank you!
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
rel="stylesheet" type="text/css">
<script>
$(function () {
$('#myTab a:first').tab('show')
})
</script>
</head>
<body>
<div class="cover">
<div class="navbar">
<div class="container">
<ul id="myTab" class="nav nav-tabs nav-justified">
<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">Your Home tab content here</div>
<div class="tab-pane" id="profile">Your Profile tab content here</div>
<div class="tab-pane" id="messages">Your Messages tab content here</div>
<div class="tab-pane" id="settings">Your Settings tab content here</div>
</div>
</div>
</div>
<div class="cover-image" style="background-image: url(https://unsplash.imgix.net/photo-1418065460487-3e41a6c84dc5?q=75&fm=jpg&s=127f3a3ccf4356b7f79594e05f6c840e);"></div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="text-inverse">Heading</h1>
<p class="text-inverse">Lorem ipsum dolor sit amet, consectetur adipisici eli.</p>
<br>
<br>
<a class="btn btn-lg btn-primary">Click me</a>
</div>
</div>
</div>
</div>
</body>
This is the code provided by Boostrap on their Documentation, in your code I can see that there is far less attributes on the structure, probably the lack of one is messing with the functioning.
Data-toggle and role are the more likely ones.
Good luck. ;)
<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">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
Related
On initial page load, the tabs show but the content for that selected tab does not.
If I click the "Link" tab and back to the "Post" tab then it shows up.
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
On page load it looks like this (the div with the tab-pane class hasn't been displayed):
There are no errors in my console and the bootstrap JS file is loaded. There are some similar questions around but the solutions have not worked for me.
What do I need to add to get the tab pane to display when the page loads?
Check this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link active" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
The root cause of your problem was the fade class. Well done ! Removing it is the solution.
Is there a way I can click on a link and to open a specific bootstrap tab on the same page?
Here is my code:
<ul class="nav nav-tabs">
<li class="active">BMR Calculator</li>
<li>Body Fat Calculator</li>
<li>Heart Calculator</li>
<li>BMI Calculator</li>
</ul>
Don't know fat percentage, please click here
Just make your additional link like below -
Don't know fat percentage, please click here
Except the fact that you cannot use numeric values as ID of an
element, Please refer HTML 5
Add <a data-toggle="tab" href="#3">click here</a> data-toggle="tab" in your link to open tab.
<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/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li class="active">BMR Calculator</li>
<li>Body Fat Calculator</li>
<li>Heart Calculator</li>
<li>BMI Calculator</li>
</ul>
<div id="1" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="3" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="4" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
<div id="5" class="tab-pane fade">
<h3>Menu 5</h3>
<p>Some content in menu 2.</p>
</div>
Don't know fat percentage, please <a data-toggle="tab" fa href="#3">click here</a>
I'm developing a web page which has dynamic tabs from Bootstrap. I'm having problem in linking a tab's content from an external page.
I want to activate the menu 1 and menu 2 tab of the page below from an external link of another page.Tried using href="index.html#menu1" but it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>index</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.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">
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Menu 1</h3>
<p>Menu 1 activated.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Menu 2 Activated </p>
</div>
</div>
</div>
</div>
</body>
</html>
thanks to this answer about query string and this answer about to show Bootstrap's tab, add the following script to your page and generate links on the other pages by using query string!
function getQuery(url) {
var query = {},
href = url || window.location.href;
href.replace(/[?&](.+?)=([^&#]*)/g, function (_, key, value) {
query[key] = decodeURI(value).replace(/\+/g, ' ');
});
return query;
}
function getParam(name){
var obj = getQuery();
return obj[name];
}
$(document).ready(function() {
var target = getParam('target');
$('.nav a[href="#'+target+'"]').tab('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>index</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.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">
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Menu 1</h3>
<p>Menu 1 activated.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Menu 2 Activated </p>
</div>
</div>
</div>
<div class="row">
use the following script and
the link on the other pages should be like this: url?target=menu2
without "#"
</div>
</div>
</body>
</html>
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 customized, togglable tabs in wordpress, but I am stuck. I would like to change the title part of the tabs to images. Something like that, but in wordpress:
http://jsfiddle.net/iamraviteja/ttpxoxob/1/
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a>
</li>
<li>
<a data-toggle="tab" href="#menu1">
<img src="http://www.downloadsbyvita.com/images/video.jpg" />
</a>
</li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Either you can use bootstrap or inbuilt jquery ui. Or Tabs Shorcode plugin