Bootstrap tab navigation not working correctly - javascript

I did a very simple setup for bootstrap tabs navigation according to http://getbootstrap.com/javascript/#tabs and http://getbootstrap.com/components/#nav-tabs.
<ul class="nav nav-tabs" id="test_tab">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<span>Hello 1!</span>
</div>
<div class="tab-pane" id="tab2">
<span>Hello 2!</span>
</div>
</div>
$(function () {
$('#test_tab a').click(function (e) {
console.info("clicked!");
e.preventDefault()
$(this).tab('show');
});
});
However, it's not working correctly. When I click on a tab (e.g. tab2), it gets activated as desired, however I can't click it again. When I click on tab 1, tab 1 get's activated, but tab 2 stays activated aswell.
For clarification:
Start
Tab 1 | Tab 2
-----------------
Click on Tab 2
Tab 1 | Tab 2
-----------------
Hello 2!
Click on Tab 1
Tab 1 | Tab 2
-----------------
Hello 2!
Hello 1!

Using bootstrap's data-* syntax, you don't have to write any JS unless you want to manually show a tab (say you want to show a tab when a button is clicked or a function is ran, rather than clicking on it in the nav).
I couldn't reproduce your issue in jsFiddle, but what I suspect is going on is the click binding is manually showing tab 1, and preventing bootstrap from hiding the others.
Try removing the click handler, and relying only on bootstrap's data-toggle="tab"

Met exactly the same problem, actually need to add the 'active' class to the tab-pane as well.
<div class="tab-pane active" id="tab1">
<span>Hello 1!</span>
</div>
Found the reference here: http://getbootstrap.com/javascript/#fade-effect

Related

how to set tab-pane to active dynamically or manually

I have recently started working with dynamic tabs and I hit a wall trying to play with them and their respective divs.
My code is the following and works this way:
<ul id="modalFormUlId" class="bootstrapWizard form-wizard">
<li class="active" data-target="#step1"> <span class="step">1</span><span class="title">Datos Generales</span>
</li>
<li data-target="#step2"> <span class="step">2</span> <span class="title">Detalles Financieros</span>
</li>
<li data-target="#step3"> <span class="step">3</span> <span class="title">Archivos</span>
</li>
<li data-target="#step4"> <span class="step">4</span> <span class="title">Historial Transacciones</span>
</li>
<li data-target="#step5"> <span class="step">5</span> <span class="title">Resguardante</span>
</li>
<li data-target="#step6"> <span class="step">6</span> <span class="title">Etiqueta</span>
</li>
</ul>
<div class="clearfix"></div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<br>
<h3><strong></strong> Datos Generales</h3>
</div><!-- End tab1 -->
<div class="tab-pane" id="tab2">
<br>
<h3><strong></strong> Detalles Financieros</h3>
</div>
<div class="tab-pane" id="tab3">
<br>
<h3><strong></strong> Lista Archivos</h3>
</div>
<div class="tab-pane" id="tab4">
<br>
<h3><strong></strong> Historial de Transacciones</h3>
</div>
<div class="tab-pane" id="tab5">
<br>
<h3><strong></strong> Resguardante</h3>
</div>
<div class="tab-pane" id="tab6">
<br>
<h3 ><strong></strong> Etiqueta del Bien</h3>
</div>
When I click a button, a small window (div) appears which has the
code written above.
Clicking on any of the li elements, brings out its respective div
Bootstrap class makes it so the li elements show as circles that
paint green when set as active (default for first one, then changes
as I click on any of them)
As you can see, the first li element has its class set as active,
since when the window its first opened, its the default choice shown.
When I close my div and re-open it by clicking the button, it appears
again having the last li element clicked as active (So, if I clicked
li for #step3 element then close my window and opened it again, #tab3
div would still be showing).
My problem comes when trying to set a different li element as active after reopening my window, since #step1 keeps showing as the active one even when any other div is the one currently being displayed, I know I would have to get the current active div and set its li element to active or something like that, but I'm still inexperienced in jQuery (need to do it with jQuery) and can't seem to do it.
Any tips would be appreciated.
You just need to add a click listener to your button which you use to open the modal and trigger a click manually on first tab.
Here is the code:
$(function(){
$('#modal-btn').click(function () {
$("#modalFormUlId a:eq(0)").click();
// or
//$('#modalFormUlId a:first').tab('show');
});
});
Here is working example http://jsfiddle.net/0mvt0qe5/3/
Onclick of any li, store the active tab in localStorage and when you hit the button you can check if active tab has any localStorage value and make them active accordingly. Hope this will help you. Please let me know if you face any issues using this.
Try doing this:
set the localStorage based on your active tab, you can give on onclick event of any tab
localStorage.setItem("activeTab", "Archivos");
Use localStorage.getItem("activeTab"), based on that add active class to the tab

show() function doesn't seem to work as expected

I am trying to create a webpage with a menu on the left side and a content area on the right side. Mockup image below to give you an idea:
I am using jQuery UI to try to accomplish this. The goal is to have the content area on the right side to be set based on the menu item selected on the left. The area will always be a tabbed layout, but the content and amount of tabs will be different for each of the item selected from the left menu. Eventually, I want to integrate this into an ASP.NET MVC 5 app to include user authorization and roles affecting what menu items and tabs will be visible based on the logged in user. But for now, I am simply trying to get the tab menu to show up based on what I click on the left menu, and to show it specifically upon clicking one specific item. For the others, it will hide it again (I have not tried to implement the re-hiding yet, and that is not part of this question; I just want to get the initial show() to work).
So right now my approach is to hide the tabs on page ready, then use a function to display it when clicked, using the jQuery show() function. However, this doesn't work (tried in firefox and IE).
My attempt is at: https://jsfiddle.net/3mo28z1t/5/
In the fiddle, in the javascript section, if you change the "hide" to "show"
$("#tabsuseradmin").hide();
you will see the tabs menu, in case you want to get an idea of the layout before trying to fix the issue.
Specifically, I want the action of clicking on "Left menu item 3" to show the tabs.
Thank you.
I cleaned your fiddle up so that your scripts/css were in external resources. You must first define the target and then call the function with the target - you haven't targeted the individual tabs(i haven't done this for you either, i'm just pointing it out) Also you can't use show as a function name, as its reserved.
What i did do is create a toggle on the #leftmenu>li - see fiddle
$(function() {
$("#tabsuseradmin").tabs();
$("#leftmenu").menu();
});
$('#leftmenu>li').on('click', function(){
$("#tabsuseradmin").toggle();
});
$(function showTab(target) {
document.getElementById(target).show();
});
$(function hideTab(target) {
document.getElementById(target).hide();
});
#leftmenu {
display: inline-block;
}
#tabsuseradmin {
display: inline-block;
margin-right: 10px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
<ul id="leftmenu">
<li>Left menu item 1</li>
<li>Left menu item 2</li>
<li>Left menu item 3</li>
<li>Left menu item 4</li>
</ul>
<div id="tabsuseradmin">
<ul>
<li>Tab first</li>
<li>Tab second</li>
<li>Tab third</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
<div id="tabs-3">
<p>Tab 3</p>
</div>
</div>
</body>
<li id="clicker" onclick="show('tabsuseradmin')">Left menu item 3</li>
$(document).ready(
function(){
$("#clicker").click(function () {
$("#tabsuseradmin").show();
});
});
Updated Fiddle
There is an error in your code. If you check console, it specifically says - show is not defined. Show & hide are methods provided by jQuery. They are not the same in javascript.
In your example you are using document.getElementById(target).show();, but .show is a jQuery method
you should use something like :
$(document.getElementById(target)).show();
$('#'+target).show();
You can also declare your event handler differently to avoid the problem seen in jsfiddle (that show is not defined), see my updated jsfiddle for that

Twitter Bootstrap tab shown event not firing on page load

In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
I tried adding this to the above script, to see if triggering it manually could work:
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
This is the HTML code I use in my view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<%=t :updates, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :activity, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :articles, :scope => 'user.profile.sections'%>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
Any clue?
Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.
JSFiddle
You can trigger the event manually when you tell the page to show the tab:
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs
After my
$("#modal").modal('show');
I added this and it worked just fine:
$('a[data-toggle="tab"]:first').click();

jQuery bootstrap tabs not working in custom modal (not bootstrap modal but my own version)

I am using bootstrap tabs on a custom modal (my own version). The tabs open when clicked the first time the modal is opened, but no longer work the second time the modal is opened.
This is the HTML code for the tabs :
<div class="tabbable"> <!-- Only required for left/right tabs -->
<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>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
What I am doing is :
I have a button in my page, when clicked on it, a modal (like Lightbox) will open with the tabs in it.
The first time it is opened, the tabs are working fine; when tabs are clicked, respective content is displayed. But when it is closed and opened again, the tabs are not working; when the tabs are clicked, the respective data is not being displayed.
Here, I am dynamically adding elements to DOM, when button clicked,but I am not removing elements when CLOSE clicked, So,deleting the element after close is clicked is the solution .

Any suggestions for how to create this type of Navigatio

If you have some Javascript experience I'd appreciate some help.
I'm having an issue trying top create a tabbed menu that looks like the one referenced in the screenshot below.
Basically, because I need to include a full width horizontal line below the heading tab, I am unable to get the first tab to remove it's active styling once one of the other tabs is removed.
So my question is: how can I separate the first tab from the others with a full length without creating two different menus.
BTW, I am aware this is a confusing explanation and understand that I am probably doing this completely wrong, but that's why I am looking for your help :)
Here is how I am trying to do this so far:
<script>
$(document).ready(function() {
/* Tabs Activiation
================================================== */
var tabs = $('.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
});
</script>
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<h1 class="tabs">
<a class="active" href="#tab1">Tab 1 (H1)</a>
</h1>
</nav>
<hr />
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<div class="tabs">
Tab 2
Tab 3
</div>
</nav>
<!-- Tab Content -->
<ul class="tabs-content grid6">
<li class="active" id="tab1">Tab 1 Content</li>
<li id="tab2">Tab 4 Content</li>
<li id="tab3">Tab3 Content</li>
</ul>
So I made a working model... uses jQuery but not hash tags
http://jsfiddle.net/nenvG/31/
I think it's easier to add content to, wouldn't need to rearrange the html for each of the elements.

Categories

Resources