Question

感谢JAAulde的更新。 Sitll有一些问题。

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

菜单 - 网址网址

内容 -

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

所以我仍然无法选择页面加载的第一个标签。而是加载一个空白页面。

我在IE中也有错误“消息：'this.style'为null或不是对象行：30 字符：9“ 在IE中整个页面加载，当我点击链接时，它只是一个锚点。这真让我抓狂。任何帮助非常感谢。如果我开始工作，我会在这里更新。

Answer 1

我相信您的问题是，在准备好文档时，您的目标是ul.sideMenu a。但是，您的代码显示LI ID设置为sideMenu（而不是类）。

将您的选择器元素/说明符与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()
    } );
} );

Answer 2

在您的代码中，this.pathname和this.hash不会提供任何内容，因为这是一个默认情况下没有此属性的锚点对象。试试这个

$(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 3

我有一个Tab系统，我认为它类似于你的系统。我使用的代码基于过滤器，将不同的类与不同选项卡的内容相关联。

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>

选择选项卡作为默认jquery

3 个答案: