I’ve created a tabbed interface with jQuery to show/hide content.
I want to be able to link to a particular tab and allow users to bookmark the current tab they are on.
As I use IDs for each containing div I can achieve this by removing return false; from the click event but this causes the page to skip down to the containing div for the tab.
Is there a way of ensuring that the URL contains the # part of the address but prevents the page from skipping? Is there another way of approaching this problem that I haven’t come across yet?
//Get all containers with tab content
var tabContainers = $("div.tab");
//Get value of # from URL
if (window.location.hash) {
//if there's a # display the relevant tab
$(tabContainers).hide().filter(window.location.hash).show();
} else {
//Show the first tab
$(tabContainers).hide().filter(":first").show();
}
$("ul#tabNav a").click( function () {
//Hide all tab content then display the current
$(tabContainers).hide().filter(this.hash).show();
//prevent page from skipping but also prevents # from appearing in address bar
return false;
});
<div id="tabNavContainer">
<ul id="tabNav">
<li id="tab1"> Course essentials </li>
<li id="tab2"> Course details </li>
<li id="tab3"> Next steps </li>
</ul>
</div>
<div class="tab" id="a">
<h3>TAB A</h3>
</div>
<div class="tab" id="b">
<h3>TAB B</h3>
</div>
<div class="tab" id="c">
<h3>TAB C</h3>
</div>
Any help is much appreciated.
You can set window.location.hash as well as reading it:
$("ul#tabNav a").click( function () {
//Hide all tab content then display the current
$(tabContainers).hide().filter(this.hash).show();
window.location.hash = this.hash;
//prevent page from skipping but also prevents # from appearing in address bar
return false;
});
Note that this will add a page into the browser history, allowing the user to use the back and forward buttons to change the hash. You should ideally also look at handling that.
Related
I have a Wordpress website I'm working on that uses jQuery tabs to separate information.
My client has pointed out that when a user uses the internal search and clicks on a result, the link does not take them to the specific tab that the info is on.
For example, if there are posters in tab #3 and the user searches for "posters", the search result link will take them to the correct page, but will have tab #1 open by default.
This makes it difficult for users to find what they're looking for. Is there any solution for this, or will we have to just do away with the tabs?
Here's the barebones code:
<div class="tabs">
<ul>
<li>apps</li>
<li>features</li>
<li>faqs</li>
</ul>
<div id="apps">
</div>
<div id="features">
</div>
<div id="faqs">
</div>
</div>
<script type="text/javascript">jQuery(function() { jQuery(".tabs").tabs() });</script>
If you know which tab the content is in:
// To open the third tab
jQuery('.tabs').tabs('options', 'active', 2);
I'd assume that a tab represents a category, so it should be easy enough to pass that to the results page.
I am developing an web app. In some of the web pages I am using Twitter Bootstrap pane tabs. below is my code.
I am trying to go to a specific tab when the page reloads.
For example: when I am in the www.mywebsite.com/c.html the first active tab is 'bc' when I go to 'cc' and refresh the page it goes back to 'bc'. I want it to stay in 'cc'. I need to be able to do something like this www.mywebsite.com/c.html#cc But this does not work.
I looked at Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload? but could not find an answer that fits my code. I tried changing the class names still no luck.
<div class="wp">
<div class="widget">
<div class="tabs">
<ul class="nav nav-pills nav-justified">
<li class="active">bc</li>
<li>cc</li>
<li>lc</li>
<li>pc</li>
<li>sc</li>
</ul>
</div>
</div>
</div>
<div class="tab-content tab-content-inverse">
<div class="tab-pane active" id="bc">
...
</div>
<div class="tab-pane" id="cc">
...
</div>
<div class="tab-pane" id="lc">
...
</div>
<div class="tab-pane" id="pc">
...
</div>
<div class="tab-pane" id="sc">
...
</div>
</div>
Get the anchor part of the URL by using location.hash in your JavaScript/jQuery.
Then, append it into the following JavaScript:
document.querySelector('.nav li a[href="#lc"]').click();
You'll simply insert the value you pull using location.hash after the href= portion, which will then be clicked.
Change the value in the following Bootply example and run it to see how it works.
BOOTPLY
This worked for me. I changed the class names to tabs and the event to click event
$(document).ready(function () {
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
}
$('.tabs a').on('click', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
});
You can write some code in JavaScript that will run when the page loads and check the # part of the url (window.location.hash). Take a look at the bootstrap website for how to toggle a certain tab: http://getbootstrap.com/javascript/#tabs
I'm using Bootstrap's nav-tabs with the following setup:
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
Home
</form>
</div>
</div>
As you can see, I have a link in my profile tab, which links to the first tab. Clicking on the anchor does change the URL in the URL bar, however it doesn't jump to the specific tab.
I then noticed that it is generally not possible to link to a tab directly, so I added the following code from Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
Now I can link to a specific tab from somewhere else, but not, if I'm on the same page where the nav-bar is. Reloading the page would then jump to the wanted tab, so I thought I could just forcefully reload the page, with the solution from Javascript: How to truly reload a site with an anchor tag?:
window.location.reload(true);
This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the home tab, when clicked on the anchor.
Thus, how would I jump to a given id from another tab?
You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascript for this.
First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">.. then add a link to your second tab:
<div class="tab-pane fade" id="profile">
<form id="tab2">
Jump to home tab (this works)
...
and add the following in your document ready:
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
Working example at jsFiddle.
The given answer
$('#myTab a[href="#home"]').tab('show');
can also be used to make a JavaScript software jump to a specific tab.
Assume you want to jump to a specific tab on start by using the url:
http://myDomain/myApp#tabSomewhere
You can imagine that will work (you need to make some additional coding).
Suppose your First page is on the tabHome (you make that active with the 'active' class. When you try to go back to that page using javascript you have to remove the active class from the tabHome using:
$('li').removeClass('active');
I'm using a twitter-bootstrap nav bar combined with tabs to load in forms via ajax (I'm using Django to serve the forms)
<ul class="nav nav-pills" id="tabs">
<li>Form1</li>
<li>Form2</li>
<li>Form3</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="form1" data-src="{% url form1 %}"></div>
<div class="tab-pane" id="form2" data-src="{% url form2 %}"></div>
<div class="tab-pane" id="form3" data-src="{% url form3 %}"></div>
</div>
This couples with the jquery:
$('#tabs').bind('show', function(element) {
paneID = $(element.target).attr('href');
src = $(paneID).attr('data-src');
$(paneID).load(src);
});
Firstly, part of me wonders whether this might be a bad idea. I can't think of a reason why but if someone could point out to me whether this method has any drawbacks I would appreciate it.
Secondly, When I navigate away from a tab, I'd like to trigger the "onunload" event for that tabs content. But I can't seem to find a way to "unload" the data from a tab when it is navigated away from.
$('#tabs').bind('hide', function(element) {
doStuff();
});
is not valid apparently. Any help/guidance appreciated.
Bootstrap tab fires an event when the tab is shown.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Taken from bootstrap:
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
You can use the relatedTarget. That is the tab that just "unloaded".
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.