Preventing a slidedown event when mouse move back to handler element - javascript

I want to prevent/stop slidedown function when user move back the cursor to the handler element.
For example if you mouse over Home the .tab-pane will slide down and if you move mouse from the .tab-pane to Home tab it will re slide down the content. What I need to detect if mouse is coming from associated .tab-pane do nothing.
$('a[data-toggle="tab"]').hover(
function(e) {
$(this).parent().addClass('active');
var target = $(this).data("target");
$($(e.target).attr('href')).slideDown('slow');
},
function(e) {
$(this).parent().removeClass('active');
var target = $(this).data("target");
var targetId = target.replace('#', '');
var relatedTarget = $(e.relatedTarget);
if (relatedTarget.attr('id') === targetId) {
return;
}
$($(e.target).attr('href')).hide();
}
);
$('.tab-pane').hover(function(e) {}, function() {
$(this).slideUp('slow');
$('.nav-tabs li').removeClass('active');
});
.tab-pane {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 20px;
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="container">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a data-target="home" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a data-target="profile" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a data-target="messages" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a data-target="settings" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home">Home
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe to newsletter?</label>
<hr />
<form method="post">
<fieldset>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="animal" value="Cat" />Cats <br />
<input type="checkbox" name="animal" value="Dog" />Dogs<br />
<input type="checkbox" name="animal" value="Bird" />Birds<br />
<input type="submit" value="Submit now" />
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Message</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting</div>
</div>
</div>
</div>


I have adjusted the script only, please try this:
$('a[data-toggle="tab"]').hover(
function(e) {
$(this).parent().addClass('active');
var target = $(this).data("target");
$('.tab-pane.active:not(#'+target+')').hide(); // Hide the tab panel except the current target
$($(e.target).attr('href')).slideDown('slow').addClass('active'); // Add the class 'active' to the tab panel
},
function(e) {
$(this).parent().removeClass('active');
var target = $(this).data("target");
var targetId = target.replace('#', '');
var relatedTarget = $(e.relatedTarget);
if (relatedTarget.attr('id') === targetId) {
return;
}
$($(e.target).attr('href')).hide();
}
);
$('.container').hover(
function(e) {},
function(e) {
$('.tab-pane.active').slideUp('slow');
$('.nav-tabs li').removeClass('active');
});
.tab-pane {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 20px;
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="container">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a data-target="home" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a data-target="profile" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a data-target="messages" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a data-target="settings" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home">Home
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe to newsletter?</label>
<hr />
<form method="post">
<fieldset>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="animal" value="Cat" />Cats <br />
<input type="checkbox" name="animal" value="Dog" />Dogs<br />
<input type="checkbox" name="animal" value="Bird" />Birds<br />
<input type="submit" value="Submit now" />
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Message</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting</div>
</div>
</div>
</div>
</div>

Related

how can we show and hide tab using checkbox

what i am trying to do that when i click on checkbox 1 and checkbox 2 then show and hide its work fine
i want when i click on both checkbox 1 and 2 then colour toggle tab red green and blue its show in up front on the add new button and when click uncheck box2 then its hide colour toggle
how can we that in below code functionality works fine but
i want to achieve colour toggle tab bar is shown in upfront of the add new button .
any help in this its very thankful .
example image link https://kapwi.ng/w/DQu7aukF what i trying to achieve in my below code https://kapwi.ng/w/DQu7aukF any one help me this
for reference image link what type i try to achieve image link example- https://ibb.co/6BWKS5c
function addDay(e) {
document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
.container-2{
display:flex}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
<input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>
<div class="container-2">
<div class="row mr-2 ml-0" style="display:none;" id="lundi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="homemade" class="container tab-pane active"><br>
<button type="button" class="btn btn-primary">ADD NEW</button>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mardi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Red</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Red</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Green</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Blue</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">test</div>
<div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
<div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
<div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
<div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

Do NOT wrap the inputs in a div, so you can do with css
#undiCheck:checked ~ #undi {
display: block;
}

First you have replace checkbox to radio button,
i modify your code add some div & change structure of your HTML
add extra some css
i hope this can solve your probleam
.menu {
max-width: 400px;
margin: 0 auto;
padding: 0;
}
.menu a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
line-height: 1;
}
label {
display: block;
margin: 0 0 2px 0;
padding :12px;
line-height: 1;
color :#fff;
background :#007bbb;
cursor :pointer;
}
input {
display: none;
}
.menu .row {
max-height: 0;
overflow-y: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.accordion:checked ~ #lundi2,
.accordion:checked ~ #mardi2,
.accordion:checked ~ #jeudi2,
.accordion:checked ~ #mercredi2 {
max-height: unset;
opacity: 1;
max-width: 100%;
}
.wrapper {
display: inline-block;
}
.menu .row {
position: absolute;
background-color: #9e9e9e;
width: 100%;
left: 0;
}
.menu {
position: relative;
}
<div class="menu">
<div class="wrapper">
<label for="lundi">01</label>
<input type="radio" name="radio" id="lundi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="lundi2">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="homemade" class="container tab-pane active"><br>
<button type="button" class="btn btn-primary">ADD NEW</button>
</div>
</div>
</div>
</div>
<div class="wrapper">
<label for="mardi" >2</label>
<input type="radio" name="radio" id="mardi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="mardi2">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Red</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Red</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Green</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Blue</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<label for="mercredi">3</label>
<input type="radio" name="radio" id="mercredi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="mercredi2">test</div>
</div>
<div class="wrapper">
<label for="jeudi">4</label>
<input type="radio" name="radio" id="jeudi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="jeudi2">Some content4</div>
</div>
</div>

how to display multiple nav bar tab horizontal on click checkbox

how to display multiple nav bar tab horizontal on click checkbox
what i am trying to do that when i click on checkbox then show navbar and when i click on uncheck box then its hide.
in here below my code what I m try to create functionality its work fine. but its show and hide nav bar in vertically but i want to achieve in one line (horizontal)
but i am not able to achieve i m stuck on that when i click on checkbox1 and checkbox2 its show in one line in horizontal. But its not happen in my code.
My goal when i click on checkbox1 and checkbox2 both then navbar tab display in one line .but in my code when i click both checkbox 1 and 2 then its show vertically.
my expectation result look like this something https://ibb.co/D16nBNH
anybody body help me this issue.
function addDay(e) {
document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
<input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>
<div class="container">
<div class="row mr-2 ml-0" style="display:none;" id="lundi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mardi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</div>
<div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
<div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
<div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
<div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>
its not happen in my code how can we do that
any help its vey thankful

You can change from .container to .container-2 class and a display:flex to it to get all the nav-tabs in horizontal line.
function addDay(e) {
document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
.container-2{
display:flex}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
<input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>
<div class="container-2">
<div class="row mr-2 ml-0" style="display:none;" id="lundi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mardi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</div>
<div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
<div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
<div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
<div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

Bootstrap nav tabs aren't switching nor displaying content! [Electron.js] [Bootstrap]

I can't figure out why
The tabs aren't switching when clicked
The tabs aren't displaying content
I am using electron and bootstrap, i would appreciate if someone had any reccomendations or solutions. I read a few other similar questions however did not find the answer (as far as i know).
A snippet is provided. Thanks
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="app-corners">
<div class="menu-bar">
<ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1-tab" data-toggle="tab" href="#1">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="2-tab" data-toggle="tab" href="#2" >2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="3-tab" data-toggle="tab" href="#3">3</a>
</li>
<li class="nav-item">
<a class="nav-link" id="4-tab" data-toggle="tab" href="#4">4</a>
</li>
</ul>
</div>
<div id="container-fluid">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="1">
</div>
<div class="tab-pane fade" id="2" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="3" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="4" >
<h1>HELLO</h1>
</div>
</div>
</div>
</div>

I hope this one will help you,
please add this link in head tag only.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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.1/js/bootstrap.min.js"></script>

Because you have not used bootstrap js files. Your code is working fine. Check here
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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.1/js/bootstrap.min.js"></script>
<div class="app-corners">
<div class="menu-bar">
<ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1-tab" data-toggle="tab" href="#1">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="2-tab" data-toggle="tab" href="#2" >2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="3-tab" data-toggle="tab" href="#3">3</a>
</li>
<li class="nav-item">
<a class="nav-link" id="4-tab" data-toggle="tab" href="#4">4</a>
</li>
</ul>
</div>
<div id="container-fluid">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="1">
</div>
<div class="tab-pane fade" id="2" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="3" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="4" >
<h1>HELLO</h1>
</div>
</div>
</div>
</div>

All i needed to do was update the bootstrap version in the header. Thanks for reading.

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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="menu-bar">
<ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
<li class="active"><a id="1-tab" data-toggle="tab" href="#1">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<br>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="1">
</div>
<div class="tab-pane fade" id="2" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="3" >
<h1>Hello</h1>
</div>
<div class="tab-pane fade" id="4" >
<h1>HELLO</h1>
</div>
</div>
</div>
</body>
</html>

How to change active tab background color as selected tab without click?

Change tab background-color when clicked it's works fine but I have the first tab active I want to make the color of it same as the selected tab and remove the color of it when another tab selected
here http://jsfiddle.net/zjjpocv6/541/
$(function() {
$('#navigation li').click(function() {
$('#navigation li').removeClass('selected');
$(this).addClass('selected');
});
});
.selected{
background-color: blue;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="nav nav-tabs" role="tablist" id="navigation">
<li role="presentation" class="active" >
Tab 1
</li>
<li role="presentation">
Tab 2
</li>
<li role="presentation">
Tab 2
</li>
<li class="float-right">
<input type="submit" value="Save" class="float-right btn btn-primary" />
</li>
</ul>

Add this CSS
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
background-color: transparent;
}

Simply give the initially active tab the selected class:
<li role="presentation" class="active selected" >
$(function() {
$('#navigation li').click(function() {
$('#navigation li').removeClass('selected');
$(this).addClass('selected');
});
});
.selected{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" role="tablist" id="navigation">
<li role="presentation" class="active selected" >
Tab 1
</li>
<li role="presentation">
Tab 2
</li>
<li role="presentation">
Tab 2
</li>
<li class="float-right">
<input type="submit" value="Save" class="float-right btn btn-primary" />
</li>
</ul>

Bootstrap tabs. Add border to current tab through jquery

Here bootstrap tabs:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li style="padding: 20px" role="presentation" class="active">Home</li>
<li style="padding: 20px" role="presentation">Profile</li>
<li style="padding: 20px" role="presentation">Messages</li>
<li style="padding: 20px" role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h1>Hello World</h1>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Hello</div>
<div role="tabpanel" class="tab-pane" id="messages">Some text</div>
<div role="tabpanel" class="tab-pane" id="settings">Second text</div>
</div>
</div>
</div>
and current tab has class active automatically with bootstrap javascript.
So i want i add border to current tab through jquery:
$('li').click(function () {
if ($(this).hasClass('active')) {
$(this).addClass('border-add')
}
})
I can not do it. Because this code works bad. If will click one of the tabs border will appear to the current tab. But if i will click to another tab the first i clicked tab border will not disappear.
Guys explain me how to realize it. Thank you in advance!

This can be done without JQuery using the class
li.active{
border: 1px solid black;
}
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
li.active{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li style="padding: 20px" role="presentation" class="active">Home</li>
<li style="padding: 20px" role="presentation">Profile</li>
<li style="padding: 20px" role="presentation">Messages</li>
<li style="padding: 20px" role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h1>Hello World</h1>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Hello</div>
<div role="tabpanel" class="tab-pane" id="messages">Some text</div>
<div role="tabpanel" class="tab-pane" id="settings">Second text</div>
</div>
</div>
</div>

You probably are just about there. Sounds like all you need to do is remove border-add before adding it:
$('li').click(function () {
$('li.border-add').removeClass('border-add'); // remove from the one that has it first
if ($(this).hasClass('active')) {
$(this).addClass('border-add'); // then add the new one
}
})

Categories