Jquery tab hash tag problem

Question

Currently I have a very simple tab system set up, the problem is when the you click on the tabs the page moves upwards but not all the way to the top. I have tried return false; and e.preventDefault(); in my click event. None of these seem to be working. If anyone could help me stop the page move when a tab is clicked that would be great. Here is my code, also for know I just have the e.preventDefault(); in my click event but I have also tried the return false too :

    $(".tab_content").hide();
$(".bat-tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("#nav-container").css("border-top", "3px solid #F79C0C");

$(".bat-tabs li > a").click(function (e) {
    $(".bat-tabs li").removeClass("active");
    $(this).parent().addClass("active");
    $(".tab_content").hide();

    var activeTab = $(this).attr("href");
    $(activeTab).fadeIn();
    e.preventDefault();

});

Here is my actual html

Thank you guys for both responding so quickly. For jbrookover: not sure how i should implement your solution bc right now for each one of my links i have a corresponding #+('tab name'), like this:                             {      <div class="clearfix">
    <ul class="bat-tabs clearfix">
        <li><a href="#baseball"  title="click to see all our choices for baseball bats" class="active"><h2>Baseball Bats</h2></a></li>
        <li><a href="#fast" title="click to see all our choices for fastpitch bats"><h2>Fastpitch Bats</h2></a></li>
        <li><a href="#slow"  title="click to see all our choices for slowpitch bats"><h2>Slow Pitch Bats</h2></a></li>
    </ul>
</div>
<div id="nav-container" class="section clearfix nav">
    <div id="baseball" class="tab_content">
        content here
     </div>
     <div id="fast" class="tab_content">
        content here
     </div>
     <div id="slow" class="tab_content">
        content here
     </div>
</div>                                                                         }

You will see # in your URL as last parameter if: a) jquery script is not loaded yet. b) Something wrong with script itself. You have firebug right? — arma, Apr 07 '11 at 18:37
Sorry to ask dumb questions but still very new to jquery, and yes i do have firebug but i usually just use the console in chrome — Lawrence, Apr 07 '11 at 18:45
I am using src="/js/jquery-1.4.4.min.js for my version of jquery — Lawrence, Apr 07 '11 at 18:48
Check out my answer below. I believe you will have great success. :) — Adam Terlson, Apr 07 '11 at 18:50

Adam Terlson · Accepted Answer · 2011-04-07T19:00:21.410

1

The problem has nothing to do with a hash tag or javascript:void(0). The issue is that you hide one div, then show the other. For a moment in between nothing is shown and so your page length is reduced, making the scrollbar appear to have moved up when once again the height is expanded.

What you'll want to do is set the height of the container of the tab to the height of the tab just before it's hidden.

EDIT: Here's something closer to your actual implementation:

$(".bat-tabs li > a").click(function (e) {
    //set the height of the container
    $('#nav-container').css({'height': $("#nav-container").height(), 'overflow': 'hidden'});

    //your own logic for hiding/showing a new tab
    $(".bat-tabs li").removeClass("active");
    $(this).parent().addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("href");
    $(activeTab).fadeIn();

    //set the height of the container back to auto.
    $('#nav-container').css({'height': 'auto', 'overflow': 'visible'});

    e.preventDefault();   
});

edited Apr 07 '11 at 19:00

answered Apr 07 '11 at 18:47

Adam Terlson

12,610
4
42
63

So to just clarify I would set up like this: $('#nav-container').css({'height': activeTab.height() + 'px'}); $(".bat-tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $('#nav-container').css({'height': 'auto'}); – Lawrence Apr 07 '11 at 18:51
Be sure to hide your tab AFTER you set the height. So set height of container to height of active tab, hide active tab, show new tab, set height back to auto. – Adam Terlson Apr 07 '11 at 18:53
Ok going to try all these solutions getting a little overwhelmed with so many responses , just so new at this so trying to go slow – Lawrence Apr 07 '11 at 18:59
I just tryied that and now my tabs are not working at all so i am debuggin right now to see where its not working – Lawrence Apr 07 '11 at 19:04
So that worked perfectly except when i first load the page all the tabs contents are showing until i actually click one of the tabs then it hides all except the one that i clicked and then it adds the selected state to the tab – Lawrence Apr 07 '11 at 19:13
http://jsfiddle.net/ZCAHd/1/ Are you actually implementing my code into yours properly? – Adam Terlson Apr 07 '11 at 19:14
2

Woot I got it to work Thanks to all of you on here and a special thanks to adam, To all that answered to thank you very much. Two things anyone have any good advice for a somewhat newer jquery user and how should i show that all you helped me on here ( is there a ranking system or karma thing) – Lawrence Apr 07 '11 at 19:17
You can show appreciation both by accepting as answer as well as clicking the up arrow on comments and answer posts (if you are able to do either of those yet, I'm not sure). As far as your jquery-fu goes, it needs some work but just read some tutorials and best practices: http://stackoverflow.com/questions/1245598/jquery-standards-and-best-practice – Adam Terlson Apr 07 '11 at 19:21
2

Well thanks again adam will check out that link , also I am able to hit the big check mark but it wont let me vote yet says i need a 15 – Lawrence Apr 07 '11 at 19:31

score 0 · Answer 2 · answered Apr 07 '11 at 18:46

This works with your html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $(".tab_content").hide();
    $(".bat-tabs li:first").addClass("active").show();
    $(".tab_content:first").show();
    $("#nav-container").css("border-top", "3px solid #F79C0C");

    $(".bat-tabs li > a").click(function (e) {
        $(".bat-tabs li").removeClass("active");
        $(this).parent().addClass("active");
        $(".tab_content").hide();

        var activeTab = $(this).attr("href");
        $(activeTab).fadeIn();
        e.preventDefault();

    });
});

As i said code work on 1.4.4 and 1.5.2 just fine in Chrome and FF. So maybe your js file is not where it supposed to be? — arma, Apr 07 '11 at 18:51

score -1 · Answer 3 · answered Apr 07 '11 at 18:56

-1

You don't really need to have the id in the link, you can do this. The click() event actually passes the element.

Here's an example on jsfiddle

If you have any other issues, feel free to comment and we'll fix.

answered Apr 07 '11 at 18:56

Khez

10,172
2
31
51

Jquery tab hash tag problem

3 Answers3