I have page that has 5 different tabs. All of them load at the same time in the current code. This is not very efficient since I'm loading five files at the same time. Instead, I would like to load only one (default) on the first initial page load. The rest of the tabs I would like to load with ajax/jquery on click. Here is example of my current code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<div class="container-fluid">
<div class="card">
<div class="card-header">
<h4>Company Profile</h4>
<ul class="nav nav-tabs card-header-tabs" id="company_tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#page_1">Page 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_2">Page 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_3">Page 3</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_4">Page 4</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_5">Page 5</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_6">Page 6</a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div id="page_1" class="tab-pane active">
<cfinclude template="page_1.html">
</div>
<div id="page_2" class="container tab-pane fade">
<cfinclude template="page_2.html">
</div>
<div id="page_3" class="container tab-pane fade">
<cfinclude template="page_3.html">
</div>
<div id="page_4" class="container tab-pane fade">
<cfinclude template="page_4.html">
</div>
<div id="page_5" class="container tab-pane fade">
<cfinclude template="page_5.html">
</div>
<div id="page_6" class="container tab-pane fade">
<cfinclude template="page_6.html">
</div>
</div>
</div>
</div>
</div>
I would like to load each html file on click. Only Page 1 should be loaded by default when user opens the page first time. All other tabs should be loaded on click. I use JQuery and Bootstrap 4 for this project.
Related
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>
Using Django Framework, Bootstrap v4.5.2.
<ul class="nav nav-pills nav-dark nav-fill bg-dark" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link text-light active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">One</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">Two</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">Three</a>
</li>
</ul>
<div class="tab-content pb-3" id="pills-tabContent">
<div class="tab-pane fade show active p-3 text-center" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
<a class="btn btn-primary btnNext">Next →</a>
</div>
<div class="tab-pane fade p-3 text-center" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
← Previous
Next →
</div>
<div class="tab-pane fade p-3 text-center" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
← Previous
</div>
</div>
<script type="text/javascript">
$('.btnNext').click(function() {
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
});
</script>
I tried all the javascript seeing stackoverflow others answer but this does not work for me
How can I solve this to work perfectly?
If anything is a mistake on my code or you want to give me some suggestions, then reply to me.
Please try this,
You can add e.preventDefault(); in click() event.
base.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Then add in Bootstrap Pills Tab's html instead of adding CDN.
{% extends "base.html" %}
$('.btnNext').click(function(e) {
e.preventDefault();
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(e) {
e.preventDefault();
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-dark nav-fill bg-dark" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link text-light active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">One</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">Two</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">Three</a>
</li>
</ul>
<div class="tab-content pb-3" id="pills-tabContent">
<div class="tab-pane fade show active p-3 text-center" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
<a class="btn btn-primary btnNext">Next →</a>
</div>
<div class="tab-pane fade p-3 text-center" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
← Previous
Next →
</div>
<div class="tab-pane fade p-3 text-center" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
← Previous
</div>
</div>
I'm trying to use bootstrap's card/tab feature to create a tabulated card that has 3 tabs, each corresponding to it's own active 'card body'
My current code:
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body">
<div id="insta">Instagram</div>
<div id="face">Facebook</div>
<div id="twit">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</div>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
Creates the card correctly, and it indeed shows the appropriate tab headers with their respective links.
What I'm trying to do is make it so that if the Instagram tab is active, it shows the text 'Instagram'. Same for the other 2. Currently they are just inactive tabs and the main tab's body shows all three lines of text.
The javascript looks right but it's just not tabulating properly
Here's the codepen:
https://codepen.io/anon/pen/gKLJrm
You need to the use the appropriate markup for tabs with tab-content and tab-pane to make the tabs work: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
(no jquery is needed)
https://www.codeply.com/go/p5Zm4JA5jb
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="tab-content card-body">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
Notice both the nav-link and tab-pane have the active item set.
I hope this solves your problem
$(document).ready(function() {
$('.nav-item a').on('click', function(e){
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tab-content ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
li.nav-item.active a {
background: #fff;
border: 1px solid #eee;
border-bottom: none
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTabs">
<li class="nav-item active">
<a class="nav-link" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</div>
In my code i have bootstrap 4 Tab .I want first all the tab-content will be hide when i click tab li then the tab-contents will be shown.
For that i've removed the active class from tab-pane div so now at first contents are not showing and when i click on the tab li it is showing then but after i click on that li again it does not closing .
I want when again i click the tab li button the tab contents should be closed again.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">A</div>
<div class="tab-pane" id="profile" role="tabpanel">B</div>
<div class="tab-pane" id="messages" role="tabpanel">C</div>
<div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Just want when click the menu it will show the content and when click again the menu it should close.
Help me
Updated
Add this extra code to remove the active class on click again.
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
$(this).removeClass('active');
$('.tab-pane[id="'+ href +'"]').removeClass('active');
})
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
//alert(href);
$(this).removeClass('active');
$('.tab-pane[id="'+ href +'"]').removeClass('active');
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">A</div>
<div class="tab-pane" id="profile" role="tabpanel">B</div>
<div class="tab-pane" id="messages" role="tabpanel">C</div>
<div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Now its working
use following Bootstrap CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">A</div>
<div class="tab-pane" id="profile" role="tabpanel">B</div>
<div class="tab-pane" id="messages" role="tabpanel">C</div>
<div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Add the following Bootstrap CDN to your code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">1</div>
<div class="tab-pane" id="profile" role="tabpanel">2</div>
<div class="tab-pane" id="messages" role="tabpanel">3</div>
<div class="tab-pane" id="settings" role="tabpanel">4</div>
</div>
If i replaced the numbers in the tabs with youtube embeded iframes video, How can i refresh tabs everytime i move between tabs? Because if i played video in first tab then moved to the next tab, the first tab would still play and consume the visitor internet