I am attempting to make an example prototype that uses two cards from Bootstrap 4 to show the information from a form and hold the information from a second related form in the second card. Right now, it looks like this:
Here is a JSFiddle with the code which i've already taken the step of introducing a specific class and selector in the style tag.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
div.card {
max-height: 50%;
min-height: 30%;
}
.wuformheader {
color: white;
padding-bottom: 0px;
background-color: blue;
}
ul.nav-tabs {
border-bottom: 0px;
}
div.card-header li.nav-item> a.active {
color: black;
background-color: white;
}
div.card-header li.nav-item> a {
color: white;
}
</style>
<title>Review Template</title>
</head>
<body>
<div class="card">
<div class="card-header wuformheader">
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-study-tab" data-toggle="tab" href="#study" role="tab" ari-controls="study" aria-selected="true">Study Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-dept-tab" data-toggle="tab" href="#dept" role="tab" ari-controls="dept" aria-selected="false">Department Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#contact" role="tab" ari-controls="contact" aria-selected="false">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-lab-tab" data-toggle="tab" href="#lab" role="tab" ari-controls="lab" aria-selected="false">Laboratory</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-form-approvals-tab" data-toggle="tab" href="#formapprovals" role="tab" ari-controls="formapprovals" aria-selected="false">Approvals</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="nav-formTabContent">
<div class="tab-pane fade show active" id="study" role="tabpanel" aria-labelledby="nav-study-tab">
Study Tab!
</div>
<div class="tab-pane fade" id="dept" role="tabpanel" aria-labelledby="nav-dept-tab">
Department Tab!
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="nav-dept-tab">
Contacts Tab!
</div>
<div class="tab-pane fade" id="lab" role="tabpanel" aria-labelledby="nav-dept-tab">
Labs!
</div>
<div class="tab-pane fade" id="formapprovals" role="tabpanel" aria-labelledby="nav-form-approvals-tab">
formapprovals!
</div>
</div>
</div>
</div>
<br/>
<div class="card">
<div="card-header wuformheader">
<ul class="nav nav-tabs" id="review-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-notes-tab" data-toggle="tab" href="#notes" role="tab" ari-controls="notes" aria-selected="true">Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-criteria-tab" data-toggle="tab" href="#criteria" role="tab" ari-controls="criteria" aria-selected="false">Criteria</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-approvals-tab" data-toggle="tab" href="#reviewapprovals" role="tab" ari-controls="reviewapprovals" aria-selected="true">Approval</a>
</li>
</ul>
</div>
<div="card-body">
<div class="tab-content" id="nav-reviewTabContent">
<div class="tab-pane fade show active" id="notes" role="tabpanel" aria-labelledby="nav-notes-tab">
Notes tab
</div>
<div class="tab-pane fade" id="criteria" role="tabpanel" aria-labelledby="nav-criteria-tab">
Criteria Tab
</div>
<div class="tab-pane fade" id="reviewapprovals" role="tabpanel" aria-labelledby="nav-approvals-tab">
Approvals
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
What needs to change for both cards to have the correct (Top in the image) styling?
You have a typo in your html on line 83 in your jsfiddle:
<div="card-header wuformheader">
It should be:
<div class="card-header wuformheader">
You deleted the word "class"
Related
I need to get the id of the active tab-pane every time that I change from tab to tab in my page and, depending on which tab-pane it is(tab-pane1,tab-pane2,tab-pane3), store(tab-pane1 = 1 and so on) in a variable and display it in the console.
Using vanilla JS or jQuery, both are fine.
my code looks like this
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
My jQuery looks like this.
console.log($(".tab-pane.active").attr("id"));
You can use class shown.bs.tab to get active tab number. Get active tab href attribute and slice to get desire result.
Example:
console.log($("a.active").attr("href").slice(-1)); // Get value when page load if needed
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
var result = $(e.target).attr("href").slice(-1); // get activ tab number
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
Note: there is not attribute id on anchor tag so why I catch href attribute and slice.
I read the Bootstrap Introduction, the Navs and tabs page, this answer and many other, still I cannot figure out what is my mistake.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
<button class="nav-link" data-bs-target="#tabUpgrades"><i class="bi-download" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"></i> Upgrades</button>
</div>
<div class="tab-content">
<div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
aaaaa
</div>
<div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
bbbbb
</div>
</div>
As you can see the tabs does not toggle.
From what I learnt:
include JQuery before Bootstrap: done
set data-bs-toggle and data-bs-target: done
use classes like nav-link, tab-pane, etc... : done
What still am I missing?
It wasn't easy to spot but you have an error on your second button
you put data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades" into the <i> tag
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
<button class="nav-link" data-bs-target="#tabUpgrades" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"><i class="bi-download" ></i> Upgrades</button>
</div>
<div class="tab-content">
<div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
aaaaa
</div>
<div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
bbbbb
</div>
</div>
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 have another one question on the improperly working tabs in Bootstrap 4.
I've tried a lot of examples from official documentation, from Stackoverflow and others. The issue is still the same.
So, I need to make switching tabs with contents. I took a code from Bootstrap 4 docs (https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior), put it to my page and linked all css and js.
The issue is that the tabs are switching properly, but the tab panes didn't change. There is no JS errors, proper js include order, all recommended version of js scripts. I have no ideas, what to do.
<!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/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="/site/signup/advertiser#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="/site/signup/advertiser#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="/site/signup/advertiser#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">3</div>
</div>
</div>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script type="application/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Please, explain me, what is wrong here.
Many thanks in advance!
<!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/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home1" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home-tab">1</div>
<div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile-tab">2</div>
<div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact-tab">3</div>
</div>
</div>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script type="application/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Your href should refer to your tab id only can work.
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>