Grow your CSS skills. Land your dream job.

[resolved] jquery tabs jumping page

  • # April 21, 2010 at 9:14 pm

    http://www.sohtanaka.com/web-design/examples/tabs/

    I am using the tab tutorial from that link on a contact form that has some scrolling. The problem is, with this implementation the page jumps to the top of the page, I’m not really sure why it is doing so. Can someone lend me a second set of eyes, to help figure this out?

    html:

    Code:

    Css:

    Code:
    ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*–Set height of tabs–*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
    }
    ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*–Subtract 1px from the height of the unordered list–*/
    line-height: 31px; /*–Vertically aligns the text within the tab–*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*–Pull the list item down 1px–*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
    }
    ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*–Gives the bevel look with a 1px white border inside the list item–*/
    outline: none;
    }
    ul.tabs li a:hover {
    background: #ccc;
    }
    html ul.tabs li.active, html ul.tabs li.active a:hover { /*–Makes sure that the active tab does not listen to the hover properties–*/
    background: #fff;
    border-bottom: 1px solid #fff; /*–Makes the active tab look like it’s connected with its content–*/
    }

    .tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
    }
    .tab_content {
    padding: 20px;
    font-size: 1.2em;
    }

    jQuery:

    Code:
    $(document).ready(function() {

    //When page loads…
    $(“.tab_content”).hide(); //Hide all content
    $(“ul.tabs li:first”).addClass(“active”).show(); //Activate first tab
    $(“.tab_content:first”).show(); //Show first tab content

    //On Click Event
    $(“ul.tabs li”).click(function() {

    $(“ul.tabs li”).removeClass(“active”); //Remove any “active” class
    $(this).addClass(“active”); //Add “active” class to selected tab
    $(“.tab_content”).hide(); //Hide all tab content

    var activeTab = $(this).find(“a”).attr(“href”); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
    });

    you can see my implementation of it here…
    http://marcosrobles.com/contact.php

    EDIT: I resolved this by using tabs from Chris’ examples page here at CSS-Tricks.

    # April 22, 2010 at 11:25 am

    I think I fixed mine by giving the container a min height. Mess with that and see…

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".