Selecting tab as default jquery

Thanks to JAAulde for update. Sitll having some issues.

$( function()
{
var tabs = $( 'ul.sideMenu a' ),
    selected,
    hashes = [],
    tabContainers;

tabs.each( function()
{
    var locationhash, linkhash, selectthis;

    locationhash = ( window.location.hash !== '' ) ? window.location.hash : '#index';
    linkhash = this.hash;

    if( this.pathname === window.location.pathname )
    {
        hashes.push( linkhash );

        selectthis = ( linkhash === locationhash );

        $( this ).toggleClass( 'selected', selectthis );
        $( linkhash ).toggle( selectthis );
    }
} );

tabContainers = $( hashes.join( ', ' ) );

tabs.bind( 'click', function( e )
{
    // hide all tabs
    tabContainers
        .hide()
        .filter( this.hash )
            .show();

    // set up the selected class
    tabs.removeClass( 'selected bluecolor' );
    $( this ).addClass( 'selected bluecolor' );

    e.preventDefault()
} );
} );

Menu -- URL URL

Content --

<div id="URL">content</div>
<div id="Content2">content2</div>

So I still can't get it to select the first tab on page load. Instead its loading a blank page.

I am also having bugs in IE "Message: 'this.style' is null or not an object Line: 30 开发者_运维问答Char: 9" In IE the whole page loads and when I click links it only acts like an anchor. This is driving me crazy. Any help greatly appreciated. If I get it working I'll update here.

---

In your code this.pathname and this.hash will not give anything because this is an anchor object which do not have this attributes by default. Try this

$(function () {
    var tabs = [];
    var tabContainers = [];
    $('ul.sideMenu a').each(function () {
        // note that this only compares the pathname, not the entire url
        // which actually may be required for a more terse solution.
        if (window.location.pathname.indexOf(this.href) != -1) {
            tabs.push(this);
            tabContainers.push(this.href.split("#")[1]).get(0));
        }
    });
    $(tabs).click(function () {
        // hide all tabs
        $("#"+tabContainers).hide().filter("#"+this.href.split("#")[1]).show();

        // set up the selected class
        $(tabs).removeClass('selected');
        $(this).addClass('selected');

        return false;
    });
});

---

I have a Tab system that I think is similar to yours. The code that I use is based on filters, associating different classes to the contents of different tabs.

JS / jQuery

$(document).ready(function(){
            fillConfeRegList(getEventID()); // Fill the contents (Must use your code to fill the container)
            // Set the default tab VISIBLE
            applyFilter('pendente');
        });

        function applyFilter(state){
            $('#inscContainer .item').each(function(index){
                (!$(this).hasClass(state))?$(this).hide():$(this).show();
            });

            $('#filterControl .filterTab').each(function(index){
                ($(this).hasClass('filter-'+state))?$(this).addClass("currentFilter"):$(this).removeClass("currentFilter");
            });

        }

HTML

<div id="filterControl">
    <input type="button" id="cmdFilterItemsAll" class="filterTab filter-item" onclick="javascript:applyFilter('item');" value="Ver Todos" />                 
    <input type="button" id="cmdFilterItemsPendentes" class="filterTab filter-pendente currentFilter" onclick="javascript:applyFilter('pendente');" value="Ver Pendentes" />                 
    <input type="button" id="cmdFilterItemsProcessado" class="filterTab filter-processado" onclick="javascript:applyFilter('processado');" value="Ver Processados" />
 </div>
 <div id="inscContainer" style="display: block; ">&nbsp;</div>

---

I believe your issue is that at document ready you're targeting ul.sideMenu a. But your code shows an LI with ID set to sideMenu (as opposed to class).

Match up your selector element/specifiers with what's in the DOM, or post code which gives better context.

Edit: based on your responses the markup is fine and your click section is working. So now you need to determine during load what the browser is loading, and when you see a link which matches that you need to select it. The code I give below should work for you or get you moving where you want to be. I think there are better ways to write it but I wanted to avoid too much modification to your code so that it is somewhat recognizable to you. Personally I prefer using jQuery UI for things like this. But if this is the only thing UI provides which you would be using, then it's probably overkill.

Code:

$( function()
{
    var tabs = $( 'ul.sideMenu a' ),
        selected,
        hashes = [],
        tabContainers;

    tabs.each( function()
    {
        var locationhash, linkhash, selectthis;

        locationhash = ( window.location.hash !== '' ) ? window.location.hash : '#index';
        linkhash = this.hash;

        if( this.pathname === window.location.pathname )
        {
            hashes.push( linkhash );

            selectthis = ( linkhash === locationhash );

            $( this ).toggleClass( 'selected', selectthis );
            $( linkhash ).toggle( selectthis );
        }
    } );

    tabContainers = $( hashes.join( ', ' ) );

    tabs.bind( 'click', function( e )
    {
        // hide all tabs
        tabContainers
            .hide()
            .filter( this.hash )
                .show();

        // set up the selected class
        tabs.removeClass( 'selected' );
        $( this ).addClass( 'selected' );

        e.preventDefault()
    } );
} );