Bootstrap tabs. Add border to current tab through jquery - javascript

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
}
})

Related

How to make bootstrap multiple tab group that shares same ID

First of all I understand that there should not be multiple instance of same ID but I am looking for better solution that will help me to complete my requirement. Below is just an example of what I am trying to do:
<div class="tab-group-1">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>About</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="abc1">Home tab content</div>
<div class="tab-pane" id="abc2">About tab content</div>
</div>
</div>
<div class="tab-group-2">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>About</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="abc1">Home tab content</div>
<div class="tab-pane" id="abc2">About tab content</div>
</div>
</div>
Here is something but you have small changes :
Bootply : http://www.bootply.com/U0LkomjCne
Explain : change a[href] by a[data-target] and prefix the target with the wrapper class.
HTML:
<div class="tab-group-1">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a data-target=".tab-group-1 #abc1" data-toggle="tab">Home</a></li>
<li><a data-target=".tab-group-1 #abc2" data-toggle="tab">About</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="abc1">Home tab content</div>
<div class="tab-pane" id="abc2">About tab content</div>
</div>
</div>
<div class="tab-group-2">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a data-target=".tab-group-2 #abc1" data-toggle="tab">Home</a></li>
<li><a data-target=".tab-group-2 #abc2" data-toggle="tab">About</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="abc1">Home tab content</div>
<div class="tab-pane" id="abc2">About tab content</div>
</div>
</div>

Bootstrap Nav-tab show hide content

In the app that I am building to learn Rails and JS, I want to use tab-navigation.
This is my tab-navigation pointing to 3 sections. I am now looking to create the JavaScript. How to I approach this when clicking the tabs and set class active to the clicked <li> while display the respective section?
I can't do getElementById or so. So, I need something like this structure:
$("li.presentation").on("click", function(event) { ...
$(...).class("active");
$(...).toggle();
};
All help appreciated!
<nav>
<ul class="nav nav-tabs">
<li role="presentation" class="active">Details</li>
<% unless #annotation.new_record? %>
<li role="presentation">Tags</li>
<li role="presentation">Comments</li>
<% end -%>
</ul>
</nav>
Sections
<section id="tab1" class="tab1">
<p>Section 1 content here </p>
</section>
<section id="tab2" class="tab2">
<p>Section 2 content here </p>
</section>
<section id="tab3" class="tab3">
<p>Section 1 content here </p>
</section>
<section id="tab3" class="tab3">
<p>Section 3 content here </p>
</section>
This is my css
.tab1 {
display: block;
}
.tab2 {
display: none;
}
.tab3 {
display: none;
}
You don't need to roll out your own custom JavaScript and css to accomplish this. You can use Bootstrap's built-in data-toggle="tab" attribute in your tab anchors.
<div class="container">
<ul class="nav nav-tabs">
<!-- add data-toggle attribute to the anchors -->
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
Here is a live demo:
http://www.bootply.com/ZSu8N3bB03

Bootstrap tabs without anchors?

I wonder whether it is possible to write Bootstrap tabs without using anchor elements <a>?
The reason I want to know is that I want to add elements inside the tab that are not valid children of <a> - in my case I want to add an <input> (note the <input> is not used to control the tabs, as such).
An archetype tab example may be:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
I know I can make tabs show programmatically using:
$('#tab1').tab('show')
But that appears to depend on the fact that it's an <a>. Could I use a <div>, for example, and hook into the click event with JQuery?
I would need some way to specify the href if I were to do it that way.
You can use any other element. Instead of href attribute, use data-target.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><span data-target="#tab1" data-toggle="tab">Section 1</span ></li>
<li> <span data-target="#tab2" data-toggle="tab">Section 2</span ></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
No need for custom javascript, but you need to style. Example in jsfiddle.
I think you can do something like this
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active"> <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title=""></li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
<div id="clickdiv" style="background-color: red;width: 20px;height: 20px"></div>
<script type="text/javascript">
$("#clickdiv").click(function(){
// $('#myTabs a:first').tab('show') // Select first tab
// $('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
});
</script>
You can use data-target on the inputs..
<input data-target="#..." data-toggle="tab" class="form-control">
Demo: http://www.codeply.com/go/mXUpU5b2x0

How do I have links open a specific tab inside a Bootstrap modal?

I have 5 links at the bottom of a webpage. They link to a Bootstrap modal with tabs that match the links on the webpage, but it always defaults to the first tab/tab content. How can I have the links open the correct tab/tab content in the modal.
Here is my code for the modal and the links that are on the webpage:
<div id="LegalModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#283c5a; border-radius: 5px 5px 0 0;">
Close
<h3>rateGenius Legal Terms & Agreements</h3>
</div>
<div class="modal-body">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a class="tab1" href="#tab1" data-toggle="tab">Terms of Use</a></li>
<li>Privacy Policy</li>
<li>Mobile Privacy Policy</li>
<li>Security</li>
<li>Licensing</li>
</ul>
<div class="tab-content" id="tabs" style="padding:30px;">
<div class="tab-pane active" id="tab1">
<h1>Terms of Use</h1>
</div>
<div class="tab-pane" id="tab2">
<h1>Privacy Policy</h1>
</div>
<div class="tab-pane" id="tab3">
<h1>Mobile Privacy Policy</h1>
</div>
<div class="tab-pane" id="tab4">
<h1>Security</h1>
</div>
<div class="tab-pane" id="tab5">
<h1>Licensing</h1>
</div>
</div>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
</div>
</div>
<ul class="list-unstyled" style="text-align:center;">
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Terms of Service</a></li>
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Privacy Policy</a></li>
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Mobile Privacy Policy</a></li>
<li>Security</li>
<li>Licensing</li>
</ul>
Have the anchor toggle both the modal and the correct tab by hooking up some custom jQuery to the links:
$(function() {
$('.legal-tabs li').on('click', function() {
var tab = $(this).index();
$('#LegalModal .modal-body .nav-tabs a:eq(' + tab + ')').tab('show');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="LegalModal" class="modal fade bs-example-modal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a class="tab1" href="#tab1" data-toggle="tab">Tab 1</a></li>
<li>Tab 2</li>
</ul>
<div class="tab-content" id="tabs" style="padding:30px;">
<div class="tab-pane active" id="tab1">
<h1>Terms of Use</h1>
</div>
<div class="tab-pane" id="tab2">
<h1>Privacy Policy</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="list-unstyled legal-tabs" style="text-align:center;">
<li>Show tab 1</li>
<li>Show tab 2</li>
</ul>

Tabs do not load the content in their tab-panes

I'm trying to make a bootstrap site with nav-tabs navigation. I cant seem to figured out why my tabs do not load the content in its tab-pane. I can get it to work in a tutorial but on on my project. Any help would be appreciated. I just wanted the tabbed content to appear when i click its link. Currently its staying on the first tab and it doesn't move. thank you!
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
rel="stylesheet" type="text/css">
<script>
$(function () {
$('#myTab a:first').tab('show')
})
</script>
</head>
<body>
<div class="cover">
<div class="navbar">
<div class="container">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active">
Home
</li>
<li>
Profile
</li>
<li>
Messages
</li>
<li>
Settings
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Your Home tab content here</div>
<div class="tab-pane" id="profile">Your Profile tab content here</div>
<div class="tab-pane" id="messages">Your Messages tab content here</div>
<div class="tab-pane" id="settings">Your Settings tab content here</div>
</div>
</div>
</div>
<div class="cover-image" style="background-image: url(https://unsplash.imgix.net/photo-1418065460487-3e41a6c84dc5?q=75&fm=jpg&s=127f3a3ccf4356b7f79594e05f6c840e);"></div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="text-inverse">Heading</h1>
<p class="text-inverse">Lorem ipsum dolor sit amet, consectetur adipisici eli.</p>
<br>
<br>
<a class="btn btn-lg btn-primary">Click me</a>
</div>
</div>
</div>
</div>
</body>
This is the code provided by Boostrap on their Documentation, in your code I can see that there is far less attributes on the structure, probably the lack of one is messing with the functioning.
Data-toggle and role are the more likely ones.
Good luck. ;)
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

Categories