We Keep Coding

How to highlight active menu of a dropdown menu of bootstrap using jquery?

I want menu item to be highlighted when an item is selected in the drop down. I tried following code. Code is working if I prevent default behavior of a which I don't want, So I tried using local storage but it is not working, only page refreshes and default Home item of menu is highlighted.
Menu
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Fire & Water <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Water Damage</li>
<li>Fire Damage</li>
<li>Storm Damage</li>
<li>Commercial Restoration</li>
</ul>
</li>
<li class="dropdown">
Mold <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Mold Remediation</li>
<li>What is Black Mold?</li>
<li>Mold "Removal" vs Remediation</li>
<li>Commercial Mold Remediation</li>
</ul>
</li>
</ul>
This is Working
$(document).ready(function(){
$(".dropdown-menu li a").click(function(e){
e.preventDefault();
var hrefs = $(this).attr('href');
alert("hrefs : " + hrefs);
$("li").removeClass('active');
$('a[href="' + hrefs + '"]').parents('li').addClass('active');
});
});
This is not working
$(document).ready(function(){
$(".dropdown-menu li a").click(function(){
var hrefs = $(this).attr('href');
alert("hrefs : " + hrefs);
localStorage.setItem('activeTab', hrefs);
var activeTab = localStorage.getItem('activeTab');
$("li").removeClass('active');
alert("activeTab : " + activeTab);
$('a[href="' + activeTab + '"]').parents('li').addClass('active');
});
});

I think, you have to apply active class on page load event not in click event. your code should be something like as below
$(document).ready(function(){
// activate left navigation based on current link
var current_url = window.location;
$('.dropdown-menu li a').filter(function () {
return this.href == current_url;
}).last().parents('li').addClass('active');
});
On every page load, you have to filter out link of current page from your navigation bar and then apply class active in parent. I have posted code for your explanation purpose you have to modify as per your HTML code structure.
Hope, this will work :)

First tab shows for a moment while staying on the current tab after page refresh in bootstrap tabs

After page refresh, first tab shows for a moment and then stays on the current tab. How can I avoid showing the first tab?
<script type="text/javascript">
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
</script>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#brandName">Brand Name</a></li>
<li><a data-toggle="tab" href="#generic">Generic</a></li>
<li><a data-toggle="tab" href="#itemType">Item Type</a></li>
<li><a data-toggle="tab" href="#category">Category</a></li>
<li><a data-toggle="tab" href="#items">Items</a></li>
</ul>
<div class="tab-content">
<div id="brandName" class="tab-pane fade in active">
Please find the relevant code added here.
Edited code (for select first tab as the default tab, when page loads for the first time, after closing the tab or debugging):
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
else{ $('#myTab a').first().tab('show'); }
});
Edit 2:
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
else{ $('#myTab a:first').tab('show'); }
});

Page Refresh Changes the Selected tab and shows the main tab. How can I keep the selected tab intact?

I am using Atlassian Javascript framework to create tabs in my page. Every time I refresh the page it goes back to the default tab and leaves the selected tab.
I added this piece of code after searching for the same problem in stack overflow but it is not working.
<script>
$('#prod-discovery a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// store the currently selected tab in the hash value
$("ul.tabs-menu > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
$('.active').removeClass('active');
// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#prod-discovery a[href="' + hash + '"]').tab('show');
</script>
This is the code I have for creating tabs:
<ul class="tabs-menu" role="tablist" id="prod-discovery">
<li class="menu-item active-tab" role="presentation">
<strong><h2>Tab One</h2></strong>
</li>
<li class="menu-item" role="presentation">
<strong><h2>Tab Two</h2></strong>
</li>
<li class="menu-item" role="presentation">
<strong><h2>Tab three</h2></strong>
</li>
<li class="menu-item" role="presentation">
<strong><h2>Tab Four</h2></strong>
</li>
<li class="menu-item" role="presentation">
<strong><h2>Tab5</h2></strong>
</li>
</ul>
For reference you can also have a look into
http://jsfiddle.net/alok15ee/5wpmsqe5/1/

On the line:
$('#prod-discovery a[href="' + hash + '"]').tab('show');
isn't there a '#' missing? When extracting the href value out of the current tab using substring(1), you're removing the hash.
Try to make it work by replacing the line above with:
$('#prod-discovery a[href="#' + hash + '"]').tab('show');

I needed to add <div class="aui-tabs horizontal-tabs" data-aui-persist="true" role="application" id="productdiscoverytabs"> to make sure tab state persists which uses HTML5 Local storage and also needed to remove to active-tab class.

Tab links not rederecting to the right page

I'm using bootstrap tabs and have added a url to each of them.
So, if someone goes to www.example.com/index.html#contact. It takes them to the right page (the contact page).
The problem is I have a home page that links to each tab. When you click "contact" on the home page it should redirect to www.example.com/index.html#contact, but instead it goes to the main page, which is "About us", even thought the URL at the top says www.example.com/index.html#contact and not www.example.com/index.html#about.
I hope that made sense.
Heres my code:
Home page: (when you click on an image it takes you to the page)
<div id="row1">
<img src="images/About_Photo_Red.jpg" width="33%" id="about">
<img src="images/Conference_Photo_Red.jpg" width="33%" id="conference">
<img src="images/Sponsors_Photo_Red.jpg"width="33%" id="sponsors">
</div>
Tabs:
<div class="tabs" id="navtabs">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills head-menu" id="navbar">
<li class="active">About Us</li>
<li>Conference</li>
<li>Sponsors</li>
<li class="disabled">Gallery</li>
<li>Contact Us</li>
</ul>
</div>
Java script
$(document).ready(function() {
// add a hash to the URL when the user clicks on a tab
$('a[data-toggle="tab"]').on('click', function(e) {
history.pushState(null, null, $(this).attr('href'));
});
// navigate to a tab when the history changes
window.addEventListener("popstate", function(e) {
var activeTab = $('[href=' + location.hash + ']');
if (activeTab.length) {
activeTab.tab('show');
$(this).scrollTop(0);
} else {
$('.nav-pills a:first').tab('show');
}
});
});

Note that the popstate event is fired only when an actual browser action is taken; calling history.pushState does not fire the event.
That said, if you take the history handler out of the event listener and into a standalone function, you can call it manually on page load (to be safe; some browsers fire a popstate event on pageload, and some do not) and after you push history.
Example:
$(document).ready(function() {
// add a hash to the URL when the user clicks on a tab
$('a[data-toggle="tab"]').on('click', function(e) {
history.pushState(null, null, $(this).attr('href'));
updateTabs();
});
function updateTabs() {
var activeTab = $('[href=' + location.hash + ']');
if (activeTab.length) {
activeTab.tab('show');
$(window).scrollTop(0);
} else {
$('.nav-pills a:first').tab('show');
}
}
// navigate to a tab when the history changes
window.addEventListener("popstate", updateTabs);
// make sure the correct tab is set on pageload
updateTabs();
});

Bootstrap linking to a tab with an url

I am working with bootstrap 3, and I am having some problems on linking a url to a specific tab, the panel changes but the activated tab doesnt.
So I want the line link, to go to the tab2, but it only goes to the panel of the tab2, it doesn't activate the tab.
Here is the html:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>link.</p>
</div>
<div class="tab-pane" id="tab2">
<p> I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Howdy, I'm in Section 3 </p>
</div>
</div>
</div>
You can test this in this link http://bootply.com/90412

In order to activate the tab you can use jQuery plugin as shown in bootstrap.
So you can add this piece of jQuery code to your program to enable the tab:
$(function () {
$('#tab1 a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
You can check this link: Updated code

The activating of the tab depends of the ul structure.
In your example case you could overwrite the click event of the plugin by adding to the end of your document (after Boostrap's Javascript):
$(function(){
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
if($(this).parent().prop('tagName')!=='LI')
{
$('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show');
}
else
{
$(this).tab('show')
}
})
});
Ref: Get element type with jQuery
Note: a shorter version will also work in this case:
$(function(){
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show');
})
});

Like Rohitha's answer, but a little more general:
$(function () {
$('a.link-to-tab').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
Works for any anchor tag with class="link-to-tab" and an href to the tab id to be shown. For example, <a class="link-to-tab" href="#tab2">.