I have working copy of tab navigation in my application, i tried to update the jquery to latest(1.7.2) , for this i have downloaded jquery-1.7.2.min.js from jquery website . After updating this the following line not working as expected tabContainers.hide().filter(':member').show();
here is the full jquery method.
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':member').show();
$(window).bind('hashchange', function () {
var hash = window.location.hash || '#member';
tabContainers.hide();
tabContainers.filter(hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$('a[hash=' + hash + ']').addClass('selected');
document.getElementById("submitform").action="newaction.action"+hash;
});
$(window).trigger( "hashchange" );
});
here is the html part
<ul class="tabNavigation">
<li><a href="#member">Tab1 </a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
</ul>
<div id="member">content goes here</div>
<div id="tab2 . . .
Update: changing :member to #member or :first loading the content of first div, but still the first li is not got selected.(members tab)
First: With a working hashchange handler, the line tabContainers.hide().filter(':member').show();
will be nullified when $(window).trigger("hashchange");
fires. Any attempt to fix tabContainers.hide().filter(':member').show();
is therefore futile and the statement can be deleted.
Second: There's a cross-browser issue with location.hash
, namely that some browsers return a string with a leading '#' and some don't. This requires the returned string to be normalized.
Taking these factors into account, you might like to try:
$(function() {
var tabContainers = $('div.tabs > div'),
submitform = $("#submitform");
$(window).on('hashchange', function () {
var hash = (location.hash=='' || location.hash=='#') ? '#member' : location.hash;
var hashNormalized = (hash.match(/^#/)) ? hash : '#'+hash;
tabContainers.hide().filter(hashNormalized).show();
$('div.tabs ul.tabNavigation a').removeClass('selected').filter(function() {
return this.hash == hashNormalized;
}).addClass('selected');
submitform.attr('action', 'newaction.action' + hashNormalized);
}).trigger('hashchange');
});
Tested in Opera 11.64 and IE9. Be sure to test in FF
See DEMO
The .filter(function(){...})
approach to filtering the anchors should immunise you against differences between jQuery versions.