We Keep Coding

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>

nav pills navigation html takes double clicks to change active tab class

<div class="container">
<br>
<ul class="nav nav-pills">
<li class=" active btn-primary "><a data-toggle="pill" href="#home">Ask</a></li>
<li class=" btn-primary "><a data-toggle="pill" href="#menu1">Reviews</a></li>
<li class=" btn-info " ><a data-toggle="pill" href="#menu3">WRITE A REVIEW</a></li>
<li class=" btn-info "><a data-toggle="pill" href="#menu2">ASK A QUESTION</a></li>
</ul>
<br>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
some content tab 1
</div>
<div id="menu1" class="tab-pane fade">
some content tab 2
</div>
<div id="menu2" class="tab-pane fade">
some content tab 3
</div>
<div id="menu3" class="tab-pane fade">
some content tab 4
</div>
</div>
</div>
It takes double clicks on a tab to change the active tab from one to another.... the tab content changes on one click but the active tab is shown as home tab and changes only on second click on same tab.
P.S. I am using angular

try to use data-target instead of href as when you use href your url also changes.. and the url of your current page changes..

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.

Is there a way to use bootstrap tabs without using a unique identifier

I would like to be able to use bootstrap tabs but without using a unique selector.
I cannot guarantee that the selector is the only one in the dom.
I have many sub templates which are either included in the page as it is rendered or can be loaded inside a modal via ajax.
I do use id's but never in the templates i might use within a modal, some modals are preloaded after the page load event.
<div class="panel">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a data-target=".pane1" data-toggle="tab" aria-expanded="true">pane 1</a></li>
<li><a data-target=".pane2" data-toggle="tab" aria-expanded="true">pane 2</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane pane1">pane 1</div>
<div class="tab-pane pane2">pane 2</div>
</div>
</div>
</div>
I have tried an onclick event on the anchor tag with just jquery which is less than ideal, but cannot get it to work with the .tab('show')
onclick="$(this).closest('.panel')
.find('.tab-pane').hide();$(this).closest('.panel').find('.pane1').show();"

Yes it is possible...for this HTML:
<div class="panel">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li>pane 1</li>
<li>pane 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane">pane 1</div>
<div class="tab-pane">pane 2</div>
</div>
</div>
</div>
This Javascript:
$('.panel .nav-tabs').on('click', 'a', function(e){
var tab = $(this).parent(),
tabIndex = tab.index(),
tabPanel = $(this).closest('.panel'),
tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
tabPanel.find('.active').removeClass('active');
tab.addClass('active');
tabPane.addClass('active');
});
See this functioning bootply
Note Take note that I removed all data attributes from the anchors to prevent bootstraps auto wireup to them**

This solution uses role attributes to control functionality rather than class names, all role are valid ARIA values. http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml. The solution works when nesting "tabpanels".
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a role="tab" data-toggle="tab">1</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">2</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">3</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel">1</div>
<div role="tabpanel">2</div>
<div role="tabpanel">3</div>
</div>
</div>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a role="tab" data-toggle="tab">1</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">2</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">3</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel">1</div>
<div role="tabpanel">2</div>
<div role="tabpanel">3</div>
</div>
</div>
javascript
I modified bootstrap tabs "show" method to include this code these lines.
var $context = $this.closest('[role="tabpanel"]');
if($context.length && $target.length != 1){
if($target.length > 1){
$target = $context.find('[role="tabpanel"] ').eq($this.parent().index());
} else {
$target = $context.find(selector).length ? $context.find(selector) : $target;
}
}
Full method.
$.fn.tab.Constructor.prototype.show=function(){var t=this.element,e=t.closest("ul:not(.dropdown-menu)"),a=t.data("target");if(a||(a=t.attr("href"),a=a&&a.replace(/.*(?=#[^\s]*$)/,"")),!t.parent("li").hasClass("active")){var r=e.find(".active:last a"),n=$.Event("hide.bs.tab",{relatedTarget:t[0]}),i=$.Event("show.bs.tab",{relatedTarget:r[0]});if(r.trigger(n),t.trigger(i),!i.isDefaultPrevented()&&!n.isDefaultPrevented()){var l=$(a),s=t.closest('[role="tabpanel"]');s.length&&1!=l.length&&(l=l.length>1?s.find('.tab-pane, [role="tabpanel"] ').eq(t.parent().index()):s.find(a).length?s.find(a):l),this.activate(t.closest("li"),e),this.activate(l,l.parent(),function(){r.trigger({type:"hidden.bs.tab",relatedTarget:t[0]}),t.trigger({type:"shown.bs.tab",relatedTarget:r[0]})})}}};

Bootstrap Tabbed Nav with Collapsing Categories

I have been trying to get a tabbed nav system working that allows the user to collapse tabs into category headings. Ideally the categories would automatically close if you select a tab outside of them, and would both look like a selected tab and actually select the first tab in their group when selected.
As of now, I have the nav functioning with the ability to show and hide certain tabs and all of the tabs work, but it is treating the tabs inside of the collapsible group as a different set from those outside it and, as such, does not deselect tabs properly. I was trying to remedy this using javascript, but I haven't figured out a way. Any insights into this would be greatly appreciated.
Link to the code on jsFiddle.
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="collapse" href="#Tab1">Tab1</a>
</li>
<div id="Tab1" class="collapse in">
<ul class="nav nav-tabs nav-stacked" id="subnav">
<li class="active"><a id="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
<li><a data-toggle="tab" href="#Subtab2">Subtab2</a></li>
<li><a data-toggle="tab" href="#Subtab3">Subtab3</a></li>
</ul>
</div>
<li><a data-toggle="tab" href="#Tab2">Tab2</a></li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a></li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a></li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
<div class="tab-pane fade" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
</div>
</div>

I managed to get this working but it required some slight changes in the markup plus some custom jQuery code.
Here's the updated fiddle. Note that the CSS was also updated to accommodate for the markup changes.
Here's the resulting code:
HTML
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"> <a data-toggle="collapse" href="#Tab1">Tab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse in" id="Tab1">
<li class="active"><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a></li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a></li>
</ul>
</li>
<li><a data-toggle="tab" href="#Tab2">Tab2</a></li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a></li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a></li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
<div class="tab-pane fade" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
</div>
</div>
</div>
jQuery
$('.nav-tabs [data-toggle="collapse"]').on('click', function () {
//Prevent the subnav from collapsing
if ($($(this).attr('href')).hasClass('in')) return false;
//Make collapse links act like tabs
$(this).parent().addClass('active').siblings('li').removeClass('active');
//Activate first subtab
$($(this).attr('href')).find('[data-toggle="tab"]').first().tab('show');
});
$('.nav-tabs > li > a').on('click', function () {
//Hide any open subnav only if it's not the collapse link
//also deactivate any active subtab
if ($(this).data('toggle') != 'collapse') {
$(this).closest('.nav-tabs').find('.collapse.in').collapse('hide').find('.active').removeClass('active');
}
});