Bootstrap tabs without anchors? - javascript

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

Related

Open Specific Tab of Bootstrap Tab Panel on Click Here Link

Is there a way I can click on a link and to open a specific bootstrap tab on the same page?
Here is my code:
<ul class="nav nav-tabs">
<li class="active">BMR Calculator</li>
<li>Body Fat Calculator</li>
<li>Heart Calculator</li>
<li>BMI Calculator</li>
</ul>
Don't know fat percentage, please click here
Just make your additional link like below -
Don't know fat percentage, please click here
Except the fact that you cannot use numeric values as ID of an
element, Please refer HTML 5
Add <a data-toggle="tab" href="#3">click here</a> data-toggle="tab" in your link to open tab.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li class="active">BMR Calculator</li>
<li>Body Fat Calculator</li>
<li>Heart Calculator</li>
<li>BMI Calculator</li>
</ul>
<div id="1" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="3" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="4" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
<div id="5" class="tab-pane fade">
<h3>Menu 5</h3>
<p>Some content in menu 2.</p>
</div>
Don't know fat percentage, please <a data-toggle="tab" fa href="#3">click here</a>

Navbar link to specific bootstrap tab without opening new window or tab?

I'm running Bootstrap 3 with links in my navbar to Bootstrap tabs on the 'Category' page, like so:
<li>Tab1</li>
<li>Tab2</li>
On my 'category' page, here's the code I have for my tabs:
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content in Tab 2.</p>
</div>
</div>
How would I use either html or jquery/javascript so that if people click on either link in the navbar, whether it's from a different page OR from the 'category' page already to go to that page with that tab open?
I am not looking to have the link open in another window or tab, but rather the same window/tab the user is currently on. (I've already tried this solution by placing target="_blank" into the links in the navbar and adding $('#myTabs a[href="' + window.location.hash + '"]').tab('show'); as the javascript. This was not my preferred solution.
Any advice/solutions you might have to offer?
I think this is what you are looking for.
It doesn't account for a variable amount of tabs, but it does the job for 2 tabs.
$(document).ready(function(){
$tab1 = $('#tab1');
$tab2 = $('#tab2');
$tablink1 = $('#link_tab1');
$tablink2 = $('#link_tab2');
$('#link_tab1 a').on('click', function(){
$tablink1.addClass("active");
$tab1.addClass("active");
$tab2.removeClass("active");
$tablink2.removeClass("active");
});
$('#link_tab2 a').on('click', function(){
$tablink2.addClass("active");
$tab2.addClass("active");
$tab1.removeClass("active");
$tablink1.removeClass("active");
});
});
<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"/>
<ul class="nav nav-tabs" id="myTabs">
<li id="link_tab1" class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li id="link_tab2"><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade in">
<h3>Tab 2</h3>
<p>Some content in Tab 2.</p>
</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 3, Dropdown in Nav Bar not targeting href on click on Internet Explorer

I am having a weird issue with a bootstrap dropdown with a Nav-Bar. Items on the Nav-Bar Target Tabs on the page. I have multiple Nav bar items and then one dropdown Nav item with 3 items within it. On Chrome and Firefox it works perfectly, however on IE, on the dropdown Nav Items it does not target the tab and display the tab.
Any idea what could be causing this?
Here is my code:
<ul id="tabshome" class="nav nav-pills nav-justified">
<li id="tab1" class="active taboutline"><a data-toggle="pill" href="#tabDiv1">Tab1</a></li>
<li id="tab2" class="taboutline"><a data-toggle="pill" href="#tabDiv2">Tab2</a></li>
<li class="dropdown taboutline">
<a class="dropdown-toggle" data-toggle="dropdown">
Drop Down Tab
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li id="dropdowntab1">DropDown Tab 4</li>
<li id="dropdowntab2">DropDown Tab 5</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="tabDiv1" class="tab-pane fade blocks in active ">
<div class="row">
Tab 1
</div>
</div>
<div id="tabDiv2" class="tab-pane fade blocks">
<div class="row">
Tab 2
</div>
</div>
<div id="dropdownTabDiv1" class="tab-pane fade blocks">
<div class="row">
Tab 3
</div>
</div>
<div id="dropdownTabDiv2" class="tab-pane fade blocks">
<div class="row">
Tab 4
</div>
</div>
</div>
I am using Jquery, and I have made sure that the jquery reference is above the bootstap.min.js reference.
I think it is because of missing ending quote of li id dropdowntab2.

Bootstrap Tabs Not Letting me change ID

Alright, I am building an application that has Bootstrap Tabs. I have all the .js files that Twitter Bootstrap has to offer in my head tag.
When I add tabs like this it works
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active">Post Update</li>
<li>Post Photos</li>
<li>Post Video</li>
<li>Create a Poll</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Test 1</div>
<div class="tab-pane" id="tab2">Test 2</div>
<div class="tab-pane" id="tab3">Test 3</div>
<div class="tab-pane" id="tab4">Test 4</div>
</div>
<script>
$(function(){
$('#myTab a:last').tab('show');
});
</script>
But on the other hand, when I change the ID on the tabs in my JavaScript and HTML, it does not work any more...
<ul class="nav nav-tabs" data-tabs="tabs" id="changedID">
<li class="active">Post Update</li>
<li>Post Photos</li>
<li>Post Video</li>
<li>Create a Poll</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Test 1</div>
<div class="tab-pane" id="tab2">Test 2</div>
<div class="tab-pane" id="tab3">Test 3</div>
<div class="tab-pane" id="tab4">Test 4</div>
</div>
<script>
$(function(){
$('#changedID a:last').tab('show');
});
</script>
Is there any way to fix this issue with bootstrap tabs, because this will get really annoying if I cannot put more than one set of tabs on the same page.
Try adding data-toggle="tab" to your links, and make sure your second set of tabs on the page have different id's
http://jsfiddle.net/JqGt9/1/
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Post Update</li>
<li>Post Photos</li>
<li>Post Video</li>
<li>Create a Poll</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Test 1</div>
<div class="tab-pane" id="tab2">Test 2</div>
<div class="tab-pane" id="tab3">Test 3</div>
<div class="tab-pane" id="tab4">Test 4</div>
</div>
</div>
<div class="container">
<ul class="nav nav-tabs" id="myTab2">
<li class="active">Post Update</li>
<li>Post Photos</li>
<li>Post Video</li>
<li>Create a Poll</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab5">Test 5</div>
<div class="tab-pane" id="tab6">Test 6</div>
<div class="tab-pane" id="tab7">Test 7</div>
<div class="tab-pane" id="tab8">Test 8</div>
</div>
</div>
Try this format.
<ul class="nav nav-tabs" id="myTab">
<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>
----------
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})

Categories