Old Jquery filter not working in latest version1.7.2

Question

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)

Answer 1

Check this fiddle .With 1.3.2 and older version only filter('#id') works but not filter(':id') .I am not sure how it worked for you.

Update tabContainers.hide().filter(':member').show(); to tabContainers.hide().filter('#member').show() ;

Answer 2

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.

Answer 3

You have to use either this

 tabContainers.hide().filter('#member').show();

or

tabContainers.hide().filter(':first').show();

To show the first div with id member .

And to highlight the corresponding a

Change this

$('a[hash=' + hash + ']').addClass('selected');

To

$('a[href=' + hash + ']').addClass('selected');

As hash is not the attribute name, it's href .