选择tab作为默认的jquery

Question

感谢jaulde的更新。还是有一些问题

$( 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()
} );
} );

菜单—URLURL

内容——

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

所以我仍然不能让它在页面加载时选择第一个选项卡。相反，它正在加载一个空白页面。

我也有错误在IE "消息:'这。Style '为空或不是对象线:30字符:9"在IE整个页面加载，当我点击链接，它只像一个锚。这快把我逼疯了。非常感谢任何帮助。如果我让它工作，我会在这里更新

Answer 1

在你的代码中路径名和这个。哈希不会给任何东西，因为这是一个锚对象，默认情况下没有这个属性。试试这个

$(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;
    });
});

Answer 2

我有一个和你的类似的制表系统。我使用的代码基于过滤器，将不同的类与不同选项卡的内容关联起来。

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>

Answer 3

我相信你的问题是在文档准备好时，你的目标是ul.sideMenu a。但是您的代码显示LI, ID设置为sideMenu(与class相反)。

将选择器元素/说明符与DOM中的内容或邮政编码进行匹配，以提供更好的上下文

编辑:根据你的反应标记是好的，你的点击部分是工作的。现在你需要在加载期间确定浏览器正在加载什么，当你看到一个匹配的链接时，你需要选择它。我下面给出的代码应该对你有用，或者让你去你想去的地方。我认为有更好的方法来写它，但我想避免对你的代码进行太多的修改，这样你就能辨认出它了。就我个人而言，我更喜欢使用jQuery UI来做这样的事情。但如果这是UI提供的唯一你会使用的东西，那么它可能是多余的。

代码:

$( 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()
    } );
} );