jquery tabs have to click twice to show div

Question

I have this jquery code:

$(document).ready(function() {
    $(".tabLink").each(function(){
        if(location.hash) {
            $(".tabLink").removeClass("activeLink");
            $(location.hash+"-1").addClass("activeLink");

            $(".tabcontent").addClass("hide")
            $(location.hash+"-1").removeClass("hide")
        } else {
                $(".tablink").click(function(){
                    $(".tabLink").removeClass("activeLink");
                    $(this).addClass("activeLink");

                    $(".tabcontent").addClass("hide")
                    $(location.hash+"-1").removeClass("hide")
                });
        }
    });
});

to switch between tabs, my html is:

<a href="#companyinfo" class="tabLink activeLink">Company</a> 
<a href="#contacts" class="tabLink">Contacts</a>
<div class="tabcontent" id="companyinfo-1"> 

</div>
<div class="tabcontent" id="contacts-1"> 

</div>

when i choose another tab i have to click it twice to make the div show

here is a fiddle with the full code : http://jsfiddle.net/2SRZE/

Ps.: There is a typo on `$(".tablink").click(function(){`, You have lower case `L` on `.tablink`. — user13500, Mar 06 '14 at 00:00
@user13500 well spotted but still nothing - http://jsfiddle.net/2SRZE/7/ — , Mar 06 '14 at 00:07
@user3223205 Still interested in events based solely on `window.hash` change? See my new answer below… — SoAwesomeMan, Mar 06 '14 at 01:21

Lucky Soni · Accepted Answer · 2014-03-06T00:57:13.150

2

FIDDLE

Why not keep it simple and grab the target right off the anchor link instead of the page URL?

<div class="tab-box"> 
    <a href="#companyinfo-1" class="tabLink activeLink">Company</a> 
    <a href="#contacts-1" class="tabLink">Contacts</a>
</div>

<div class="tabcontent" id="companyinfo-1"> 
    Tab 1 Content    
</div>

<div class="tabcontent hide" id="contacts-1"> 
    Tab 2 Content    
</div>


   $(document).ready(function() {
       if(location.hash) {
         // maybe do a little more validation here
         setActiveLink(location.hash);
       }
       $('.tabLink').click(function(e) {
           e.preventDefault();
           var target = $(this).attr('href');
           document.location.hash = target;
           setActiveLink(target);

       });

       function setActiveLink(target) {
           $(".tabLink").removeClass("activeLink");
           $('a[href=' + target + ']').addClass("activeLink");
           $('.tabcontent').addClass('hide');
           $(target).removeClass('hide');
       }
    });

edited Mar 06 '14 at 00:57

answered Mar 05 '14 at 23:56

Lucky Soni

6,811
3
38
57

this doesn't keep the lat selected tab on page refresh which is why i was trying to use #contacts etc on the end of the url – Mar 06 '14 at 00:33
still not keeping it selected – Mar 06 '14 at 00:43
its not putting the # on the end of the url when i click a link/tab – Mar 06 '14 at 00:43
check now.. removed `e.preventDefault()` – Lucky Soni Mar 06 '14 at 00:44
thats great - only thing is when i click one its making the page scroll because of the # - is it possible to stop this ? – Mar 06 '14 at 00:46
here you go http://stackoverflow.com/questions/1489624/modifying-document-location-hash-without-page-scrolling – Lucky Soni Mar 06 '14 at 00:47

user13500 · Answer 2 · 2014-03-06T00:26:54.473

A comment on why you have to click twice:

When you click the tab and the event is triggered the address of the window still has not changed. On first click that would mean no hash. On subsequent clicks that would mean the hash has the value of previous clicked anchor.

Page enter: hash == ''
Click on Contacts: hash == ''
Hide content. (Company is being hided.)
Show hash + '-1' (no match as hash is empty.)
Event done, window hash changes: hash == '#contacts'
Click on #contacts: hash == '#contacts'
Hide content. (Nothing to hide).
Show hash + '-1': contacts-1 show.

Easier by example. Here the text-box is updated with hash value on each click.

Fiddle

As you can see, the hash changes too late.

So: As noted by Lucky Soni, check the target event's href value.

score 0 · Answer 3 · answered Mar 06 '14 at 00:41

http://jsfiddle.net/awesome/svP3T/2/

   $(document).ready(function () {
       $(".tabcontent").addClass("hide");
       $($(".activeLink").attr('href') + '-1').removeClass("hide");
       $(".tabLink").each(function () {
           var _tabLink = $(this);
           var _tabLinkAttr = $(_tabLink.attr('href') + '-1');
           _tabLink.click(function () {
               $(".tabLink").removeClass("activeLink");
               _tabLink.addClass("activeLink");

               $(".tabcontent").addClass("hide");
               _tabLinkAttr.removeClass("hide");
           });
       });
   });

score 0 · Answer 4 · edited May 23 '17 at 12:28

check this out: http://jsfiddle.net/awesome/svP3T/4/

see this too: $(window) bind hashchange how to check part hash changed?

var originalHash = window.location.hash;

$(document).ready(function () {
    $(window).bind('hashchange', function () {
        // remove all active
        $(".tabLink").removeClass("activeLink");
        $(".tabcontent").addClass("hide");

        // https://stackoverflow.com/questions/7699073/window-bind-hashchange-how-to-check-part-hash-changed
        var newHash = window.location.hash;
        var _origHash = originalHash;
        originalHash = newHash;

        // log
        console.log('original: ' + _origHash);
        console.log('new: ' + newHash);

        // update active
        $('[href="' + newHash + '"]').addClass("activeLink");
        $(newHash + '-1').removeClass("hide");
    });

    // init    
    $(".tabcontent").addClass("hide");
    $($(".activeLink").attr('href') + '-1').removeClass("hide");
});

jquery tabs have to click twice to show div

4 Answers4