Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [resolved] jquery tabs jumping page

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #28805
    blue642
    Member

    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.

Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.