Question

I have a script which involves a click function and it always takes me to top of the page. I tried returning false as well as event.preventDefault() function but none seem to work. Here is my code: http://jsfiddle.net/79Rzh/14/

Please help.

Thanks in advance.

Answer 1

If it’s ok with you get the tab’s ID from another property, like data-tab or something;

HTML:

<ul class="tabs top_rounded">
    <li class="active tab top_rounded"><a href="#tab1" data-tab="tab1">Overview</a></li>
    <li class="inactive tab"><a href="#tab2" data-tab="tab2">Cast &amp; Crew</a></li>
    <li class="inactive tab"><a href="#tab3" data-tab="tab3">Reviews</a></li>
    <li class="inactive tab"><a href="#tab4" data-tab="tab4">Trivia</a></li>
    <li class="inactive tab"><a href="#tab5" data-tab="tab5">News</a></li>
</ul>

Javascript:

$(document).ready(function() {
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();
    $("ul.tabs li a").click(function(e) {
        $("ul.tabs li").removeClass("active");
        $(".tab_content").hide();

        $(this).parent().addClass("active top_rounded");
        var activeTab = "#" + $(this).data("tab");
        $(activeTab).fadeIn();
        e.preventDefault();
    });
});

Working example.

When you set the href attribute to activeTab variable you actually get the whole URL like http://somedomain.com/#tab2 and when you try to use that variable to select elements you actually doing this: $('http://somedomain.com/#tab2') That’s why it doesn’t work with href attribute. HTML5 data attributes with jQuery .data() method works well in this kind of situations.