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
Related
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>
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>
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
this is my code on my tabs. I dont know what will I do to make the badges count reset to 0 if I clicked on it. Anyways, I'm using Codeigniter, if anyone knows how to do it. Kindly help me, I will deeply appreciate it. Thank you
<div class="container-fluid" > <!--Main container-->
<div class="row">
<div class="col-md-8 ui segment" style="min-height:300px;">
<br>
<ul class="nav nav-tabs" id="tabs">
<li class="active"><a data-toggle="tab" href="#home" style="">Home</a></li>
<li><a data-toggle="tab" id="tabbad" href="#menu1">PM's <span class="badge"> 3</span> </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 panel panel-default">
<div class="panel-body">
<h3>HOME</h3>
<p>Some content.</p>
</div>
</div>
<div id="menu1" class="tab-pane fade panel panel-default">
<div class="panel-body">
<h3>HOME</h3>
<p>Some content.</p>
</div>
</div>
<div id="menu2" class="tab-pane fade panel panel-default ">
<div class="panel-body">
<h3>HOME</h3>
<p>Some content.</p>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div><!--row-->
</div><!--Main container-->
Add an onclick function in the span
<li><a data-toggle="tab" id="tabbad" href="#menu1">PM's <span class="badge" onclick="reset(this);"> 3</span> </a></li>
Define a reset function/give it any name you like
function reset(ttr){
ttr.innerHTML=0;
}
Place the onclick function in the a element if you would like, and append "PM"+whatever value you want.
I am trying to create customized, togglable tabs in wordpress, but I am stuck. I would like to change the title part of the tabs to images. Something like that, but in wordpress:
http://jsfiddle.net/iamraviteja/ttpxoxob/1/
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a>
</li>
<li>
<a data-toggle="tab" href="#menu1">
<img src="http://www.downloadsbyvita.com/images/video.jpg" />
</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>
Either you can use bootstrap or inbuilt jquery ui. Or Tabs Shorcode plugin