I have two tabs, Google and Yahoo!. The goal is that if the 'Google' tab is active, then the plus sign icon (on the right) will contain the URL based on the conditional.
Example: If 'Google' tab is active, then clicking on the plus sign should open a google.com page.
I'm not sure what I'm doing wrong:
let activeTab = document.querySelector(".nav-tabs li.active");
let selectedForm = document.querySelector("#formSelector");
if (activeTab.textContent == "Google") {
selectedForm.setAttribute("onclick", "location.href='https://www.google.com'");
} else if (activeTab.textContent == "Yahoo!") {
selectedForm.setAttribute("onclick", "location.href='https://www.yahoo.com'");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>
I would recommend adding a click event listener on the button that checks the active tab and redirects accordingly:
let selectedForm = document.querySelector("#formSelector");
selectedForm.addEventListener('click', function() {
let activeTab = document.querySelector(".nav-tabs li.active");
if (activeTab.textContent.trim() == "Google") {
location.href = 'https://google.com'
} else {
location.href = 'https://yahoo.com'
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>
As Spectric said, moving the check to be based on click of a tab would be ideal.
Here's an alternative implementation (requires HTML & JS changes).
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google" related-url="https://google.com">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo" related-url="https://yahoo.com">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>
Javascript
<script>
const tabClick = document.querySelectorAll(".nav-tabs");
const selectedForm = document.querySelector("#formSelector");
tabClick.forEach((tabEl) => {
tabEl.addEventListener('click', (e) => {
console.log(tabEl);
console.log(e);
selectedForm.setAttribute('href', e.target.getAttribute('related-url'));
});
})
</script>
I have created a bootstrap pills in my website but its is not working the way its showed on documentation. when I click on the pill its not opening the specific tab panel. here am attaching the code.Here am tring to add tabs pills linking with specific contents below in divs. Don't know what am missing in the code but when i click on the tab the contents are not changing.
<script>
$(".nav li a").on("click", function() {
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main" class="container">
<div class="text-center mt-5 pt-5">
<h1>Verbal Ability :: Comprehension</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<!--Test Links-->
<div class="overflow-auto bg-light" style="height: 200px;">
<ol class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="pill">Comprehension - Section 3</a>
</li>
</ol>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
<div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
</div>
</main><!-- /.container -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
You should load jQuery before loading Bootstrap. Please read the docs properly.
Your script method of adding a class("active") was wrong. There is an inbuilt method provided by Bootstrap .tab("show") which then enables the tab to toggle properly as per the given ID's
I have changed the snippet and it's working now. Kindly go through this https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp to learn more in detail.
$(document).ready(function(){
$(".nav-item a").click(function(){
$(this).tab('show');
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main" class="container">
<div class="text-center mt-5 pt-5">
<h1>Verbal Ability :: Comprehension</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<!--Test Links-->
<div class="overflow-auto bg-light" style="height: 200px;">
<ol class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#third" data-toggle="pill">Comprehension - Section 3</a>
</li>
</ol>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
<div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
<div id="third" class="tab-pane fade" role="tabpanel">Content 3</div>
</div>
</main><!-- /.container -->
<!-- jQuery should come before loading boostrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
I am working on bootstrap tabs, I am trying for the single tab with multiple content div's. I have tried by using two data-target values like data-target=".etab-p1, .etabi-img1".but it only works for one content div other second content is not changing.
$(document).ready(function() {
$('#myTab a').click(function() {
var href = $(this).attr('href');
if (href == "[href^='tab-']") {
$('.tab-pane').css('display', 'none');
$("[class^='etab-'][class^='etabi-']").removeClass('show');
$("[class^='etab-'][class^='etabi-']").css('display', 'block');
$("[class^='etab-'][class^='etabi-']").addClass('show');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link" href="#tab-1" data-target=".etab-p1, .etabi-img1" data-toggle="tab">C1</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-2" data-target=".etab-p2, .etabi-img2" data-toggle="tab">C2</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-3" data-target=".etab-p3, .etabi-img3" data-toggle="tab">C3</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-4" data-target=".etab-p4, .etabi-img4" data-toggle="tab">C4</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-5" data-target=".etab-p5, .etabi-img5" data-toggle="tab">C5</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-6" data-target=".etab-p6, .etabi-img6" data-toggle="tab">C6</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active etab-p1">
<p>Content 1.</p>
</div>
<div class="tab-pane fade etab-p2">
<p>Content 2.</p>
</div>
<div class="tab-pane fade etab-p3">
<p>Content 3.</p>
</div>
<div class="tab-pane fade etab-p4">
<p>Content 4.</p>
</div>
<div class="tab-pane fade etab-p5">
<p>Content 5.</p>
</div>
<div class="tab-pane fade etab-p6">
<p>Content 6.</p>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active etabi-img1">
<p>Content 111.</p>
</div>
<div class="tab-pane fade etabi-img2">
<p>Content 2222.</p>
</div>
<div class="tab-pane fade etabi-img3">
<p>Content 3333.</p>
</div>
<div class="tab-pane fade etabi-img4">
<p>Content 4444.</p>
</div>
<div class="tab-pane fade etabi-img5">
<p>Content 5555.</p>
</div>
<div class="tab-pane fade etabi-img6">
<p>Content 6666.</p>
</div>
</div>
Using show.bs.tab event
$('#myTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
let target = $(e.target).data('target');
$(target)
.addClass('active show')
.siblings('.tab-pane.active')
.removeClass('active show')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active show" href="#tab-1" data-target=".etab-p1, .etabi-img1" data-toggle="tab">C1</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-2" data-target=".etab-p2, .etabi-img2" data-toggle="tab">C2</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-3" data-target=".etab-p3, .etabi-img3" data-toggle="tab">C3</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-4" data-target=".etab-p4, .etabi-img4" data-toggle="tab">C4</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-5" data-target=".etab-p5, .etabi-img5" data-toggle="tab">C5</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-6" data-target=".etab-p6, .etabi-img6" data-toggle="tab">C6</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active etab-p1">
<p>Content 1.</p>
</div>
<div class="tab-pane fade etab-p2">
<p>Content 2.</p>
</div>
<div class="tab-pane fade etab-p3">
<p>Content 3.</p>
</div>
<div class="tab-pane fade etab-p4">
<p>Content 4.</p>
</div>
<div class="tab-pane fade etab-p5">
<p>Content 5.</p>
</div>
<div class="tab-pane fade etab-p6">
<p>Content 6.</p>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active etabi-img1">
<p>Content 111.</p>
</div>
<div class="tab-pane fade etabi-img2">
<p>Content 2222.</p>
</div>
<div class="tab-pane fade etabi-img3">
<p>Content 3333.</p>
</div>
<div class="tab-pane fade etabi-img4">
<p>Content 4444.</p>
</div>
<div class="tab-pane fade etabi-img5">
<p>Content 5555.</p>
</div>
<div class="tab-pane fade etabi-img6">
<p>Content 6666.</p>
</div>
</div>
$(document).ready(function() {
$('#myTab a').click(function(){
var href = $(this).attr('href');
if(href == "#profile") {
$('.profile, .profile_else').css('display','')
$('.profile, .profile_else').addClass('show')
$('.profile, .profile_else').removeClass('hide')
$('.home, .home_else').removeClass('show')
$('.home, .home_else').addClass('hide')
}
if(href == "#home") {
$('.home, .home_else').addClass('show')
$('.home, .home_else').removeClass('hide')
$('.home, .home_else').css('display','')
$('.profile, .profile_else').removeClass('show')
$('.profile, .profile_else').addClass('hide')
}
})
})
body {
padding:70px;
}
.tab-content{
display: inline-block;
width: 49%;
}
.show{
display: block !important;
}
.hide{
display: none !important;
}
.nav-link.active{
background-color: red !important;
color: #fff !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="nav-item active"><a class="nav-link" href="#home" data-target=".home, .home_else" data-toggle="tab">C1</a></li>
<li class="nav-item"><a class="nav-link" href="#profile" data-target=".profile, .profile_else" data-toggle="tab">C2</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade show home">
<p>Content 1.</p>
</div>
<div class="tab-pane fade hide profile">
<p>Content 2.</p>
</div>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade show home_else">
<p>Content 111.</p>
</div>
<div class="tab-pane fade hide profile_else">
<p>Content 2222.</p>
</div>
</div>
use only id don't use more than one id in data-target.
Add multiple content div inside single tab div.
Check out this example.
$(function(){
$('#tabcontainer .tabs').hide().eq(0).show();
$('#tabcontainer-2 .tabs').hide().eq(0).show();
$('#tabs li').click(function(){
num = $('#tabs li').index(this);
$('#tabcontainer .tabs').hide().eq(num).show();
$('#tabcontainer-2 .tabs').hide().eq(num).show();
});
});
#tabs li {list-style: none; background:#ccc; padding: 10px;}
#tabcontainer-2{
width:200px;
margin-left:15px;
float:left;
position:relative;
}
#tabcontainer{
width:200px;
margin-left:15px;
float:left;
position:relative;
}
ul li{
width:75px;
float:left;
position relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul><br/><br/><br/><br/>
<div id="tabcontainer">
<div id="tabcontent1" class="tabs">Content1 from link 1</div>
<div id="tabcontent2" class="tabs">Content1 from link 2</div>
<div id="tabcontent3" class="tabs">Content1 from link 3</div>
<div id="tabcontent4" class="tabs">Content1 from link 4</div>
</div>
<div id="tabcontainer-2">
<div id="tabcontent1-2" class="tabs">Content2 from link 1</div>
<div id="tabcontent2-2" class="tabs">Content2 from link 2</div>
<div id="tabcontent3-3" class="tabs">Content2 from link 3</div>
<div id="tabcontent4-4" class="tabs">Content2 from link 4</div>
</div>
There is a simple tab provided by bootstrap itself.
please take a look. this one is sample which I used in my project.
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
$(".act span").text(x);
$(".prev span").text(y);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.0/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p style='color:pink'>I am working on bootstrap tabs, I am trying for the single tab with multiple content div's. I have tried by using two data-target values like data-target=".etab-p1, .etabi-img1".but it only works for ..</p>
<p style='color:green'>I am working on bootstrap tabs, I am trying for the single tab with multiple content div's. I have tried by using two data-target values like data-target=".etab-p1, .etabi-img1".but it only works for ..</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p style='color:red;'>Tab based navigations provides an easy and powerful mechanism to handle huge amount of content within a small area through separating content into different panes where each pane is viewable one at a time. The user can quickly access the content through switching between the panes without leaving the page. The following example will show you how to create the basic tabs using the Bootstrap tab component.</p>
<p style='color:green;'>Tab based navigations provides an easy and powerful mechanism to handle huge amount of content within a small area through separating content into different panes where each pane is viewable one at a time. The user can quickly access the content through switching between the panes without leaving the page. The following example will show you how to create the basic tabs using the Bootstrap tab component.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p style='color:green;'> This event fires after the previous active tab is hidden and a new tab is shown. You can use the event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. This event fires after the previous active tab is hidden and a new tab is shown. You can use the event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively..</p>
<p style='color:red;'> This event fires after the previous active tab is hidden and a new tab is shown. You can use the event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. This event fires after the previous active tab is hidden and a new tab is shown. You can use the event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively..</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p style='color:blue'>You can activate a tab component without writing any JavaScript — simply specify the data-toggle="tab" on each tab, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content. The following example will show you how to create a basic tabbable tabs via data attributes in Bootstrap.</p>
<p style='color:cyan'>You can activate a tab component without writing any JavaScript — simply specify the data-toggle="tab" on each tab, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content. The following example will show you how to create a basic tabbable tabs via data attributes in Bootstrap.</p>
</div>
</div>
<hr>
<p class="act"><b>Active Tab</b>: <span></span></p>
<p class="prev"><b>Previous Tab</b>: <span></span></p>
</div>
here is a code snippet that will help you with your question :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<div>First Panel div1</div>
<div>First Panel div2</div>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<div>Second Panel div1</div>
<div>Second Panel div2</div>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<p>Second Panel duv2</p>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<p>Third Panel</p>
</div>
</div>
Edit: 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://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>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col">
Content 1
</div>
<div class="col">
Another Content 1
</div>
</div>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<div class="container hide">
<div class="row">
<div class="col">
Content 2
</div>
<div class="col">
Another Content 2
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have solved your problem using jquery.
Here is the solution :
$(document).ready(function() {
$('#myTab a').click(function() {
var href = $(this).attr('href');
var num = href.split("-")[1];
$('.tab-pane').css('display', 'none');
$("[class^='etab-'][class^='etabi-']").removeClass('show');
$(".etab-p"+num).css('display', 'block');
$(".etabi-img"+num).css('display', 'block');
$(".etab-p"+num).addClass('show');
$(".etabi-img"+num).addClass('show');
});
});
body {
padding:70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link" href="#tab-1" data-target=".etab-p1, .etabi-img1" data-toggle="tab">C1</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-2" data-target=".etab-p2, .etabi-img2" data-toggle="tab">C2</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-3" data-target=".etab-p3, .etabi-img3" data-toggle="tab">C3</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-4" data-target=".etab-p4, .etabi-img4" data-toggle="tab">C4</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-5" data-target=".etab-p5, .etabi-img5" data-toggle="tab">C5</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-6" data-target=".etab-p6, .etabi-img6" data-toggle="tab">C6</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active etab-p1">
<p>Content 1.</p>
</div>
<div class="tab-pane fade etab-p2">
<p>Content 2.</p>
</div>
<div class="tab-pane fade etab-p3">
<p>Content 3.</p>
</div>
<div class="tab-pane fade etab-p4">
<p>Content 4.</p>
</div>
<div class="tab-pane fade etab-p5">
<p>Content 5.</p>
</div>
<div class="tab-pane fade etab-p6">
<p>Content 6.</p>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active etabi-img1">
<p>Content 111.</p>
</div>
<div class="tab-pane fade etabi-img2">
<p>Content 2222.</p>
</div>
<div class="tab-pane fade etabi-img3">
<p>Content 3333.</p>
</div>
<div class="tab-pane fade etabi-img4">
<p>Content 4444.</p>
</div>
<div class="tab-pane fade etabi-img5">
<p>Content 5555.</p>
</div>
<div class="tab-pane fade etabi-img6">
<p>Content 6666.</p>
</div>
</div>
Credit to #User863 for the answer using Bootstrap 4. For anyone that might come across this today using Bootstrap 5.1.3, here's an updated and simplified example:
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active show" data-bs-target=".etab-p1, .etabi-img1" data-bs-toggle="tab">C1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-target=".etab-p2, .etabi-img2" data-bs-toggle="tab">C2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active etab-p1">
<p>Content 1.</p>
</div>
<div class="tab-pane fade etab-p2">
<p>Content 2.</p>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active etabi-img1">
<p>Content 111.</p>
</div>
<div class="tab-pane fade etabi-img2">
<p>Content 2222.</p>
</div>
</div>
<script>
$('#myTab a[data-bs-toggle="tab"]').on('show.bs.tab', function (e) {
let target = $(e.target).data('bs-target');
$(target)
.addClass('active show')
.siblings('.tab-pane.active')
.removeClass('active show')
});
</script>
I'm using Three iframe inside index files with 3 Tabs. I want to load or refresh the files inside the iframe when each tab is selected.
Here is my index files
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#home" data-toggle="tab">Enter</a></li>
<li><a data-target="#profile" data-toggle="tab" >Display</a></li>
<li><a data-target="#messages" data-toggle="tab">Search</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<iframe src="EnterBook.php" ></iframe>
</div>
<div class="tab-pane" id="profile" >
<iframe src="DisplayBooks.php" ></iframe>
</div>
<div class="tab-pane" id="messages">
<iframe src="SearchBooks.php" ></iframe>
</div>
</div>
I did look over other solution but nothing helped.. Please anyone can have a look over it.
You need to add click event handler to every tab and in callback function get relevant iframe of clicked tab and change reset src attribute of it or use Location.reload()
document.querySelectorAll('#myTab a').forEach(function(ele){
ele.onclick = function(){
var iframe = document.querySelector(this.dataset.target+'>iframe');
iframe.src = iframe.src;
}
});
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-target="#home" data-toggle="tab">Enter</a>
</li>
<li>
<a data-target="#profile" data-toggle="tab" >Display</a>
</li>
<li>
<a data-target="#messages" data-toggle="tab">Search</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<iframe src="https://stacksnippets.net/"></iframe>
</div>
<div class="tab-pane" id="profile">
<iframe src="https://stacksnippets.net/"></iframe>
</div>
<div class="tab-pane" id="messages">
<iframe src="https://stacksnippets.net"></iframe>
</div>
</div>
I am trying to implement a toggleable tab menu through bootstrap and also using Material Design for bootstrap
I have a issue with the tabs after the first one always pushing its content down (below where the 1st tab content would be)
I have searched around and found a similar issue discussed here and also tried the solution provided but it didn't seem to work for me
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
You need to remove the show class from the default active tab, so tab-pane fade in show active becomes tab-pane fade in active:
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
</head>
<body>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
</body>
</html>
Remove the show class from the first tab pane
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
</head>
<body>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
</body>
</html>