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>

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

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.

Menu tab button doesn't work

I have a CSS menu tab which base on idTabs.js , it has 3 buttons which switch between the content appeared on the menu <div> -
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
(here its demo)
Now I try to edit it a little bit such that the button would be under the menu div -
<div>
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
</div>
<div class="usualBottom">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
but the buttons stop working , mean they don't switch the menu content .
(here its demo)
How to fix that ?

I think your selector was wrong. Instead of $("#usual1 ul").idTabs(); it should have been $(".usualBottom ul").idTabs(); . See if it works.
Demo :http://jsfiddle.net/3Njy5/3/

You need to write the ul containing tabs before the div containing content. If you need your tabs after the content or at bottom of page, you need to do that by positioning.

I believe that is because you're not constructing the tabs the correct way in your second example. I think the plugin registers the individual tab contents as siblings of the tab navigation menu, and when you move them into different parents the plugin will not work.
You can, however, change the position of the menu by moving it after the tabs: http://jsfiddle.net/teddyrised/HwfF6/1/
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>

You should replace elements inside of the div.
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
If you want the tabs be inside of wrapper, use before pseudo tag.
.usual ul:before {
content: ".";
}
Example:
JS FIDDLE

Try like this,
<script type="text/javascript">
$(".usualBottom").find("ul").idTabs();
</script>
Demo : http://jsfiddle.net/3Njy5/4/

How to open FancyBox in a Spry tabbed panel

I am using a Spry tabbed panel for an HTML base site.
I want to open fancybox, by clicking on a tab (four tabs in total). Once the user fills the fancybox form, only that particular tab panel content should be open.
Is this possible?
Below is my code.
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
I want to a form to be filled on tab #2 in fancy box. Once user fill that form and submit successfully after that only tab panel content should be opened.

As you have not posted any code ..I can tell only logic .. U can get the selectedtab index by
var index= ($tabs.tabs('option', 'selected'));
and then you compare your index with the fetched index and if it matches then open your fancybox by
$(".fancy").fancybox().trigger('click');
and you can write your own function on sumbit/close of fancybox
$("<YOUR-SELECTOR>").fancybox({
onClosed: function() {
// your own functions
});
});