javascript - 利用现有代码激活标签页

首先，如果我想念您可能需要的任何东西，并提出一个模糊的问题，我会提出要求。我处于困境中，并且尽力了好几个星期才能找到解决方案。

我有以下代码，这是一个标签选择代码。我不太了解jquery，也没有足够的JavaScript来掌握基础知识。我不太了解下面的所有代码，但我确实知道它可以控制单击选项卡和页面的初始加载时发生的情况。正确？

目的是能够提供来自另一个站点的链接，并使Tab_2或Tab_3处于活动状态。当前，访问站点时，第一个选项卡（Tab_1）始终是活动选项卡。我需要用户在页面加载时在另一个选项卡中查看内容，并且仍然能够单击每个选项卡进行更改。

我希望这能使juru大师知道。

这是处理选项卡的jQuery。

//Add to Global JS File
$(document).ready(function() {
    initTabbedHomeContent();
});


function initTabbedHomeContent() {
var tabsPanel = $('.home');

if (tabsPanel.length > 0) {
    var tabTitles = "";

    $.each($('.tab_container .tab'), function(i) {
        //var tabid = 'tab' + i
        //$(this).attr('id', 'tab' + i);

        var tabid = $(this).find('h2').eq(0).text()
        var tabid = tabid.replace(/\s+/g,'_')
        $(this).attr('id', tabid);
        $(this).addClass("tabsActive");

        //tabTitles += '<li><a href="#tab' + i + '"><span>' + $(this).find('h2').eq(0).text() + '</span></a></li>';
        tabTitles += '<li><a href="#' + tabid  + '"><span>' + $(this).find('h2').eq(0).text() + '</span></a></li>';
    });

    $('.tab_container').prepend('<ul class="tabs">' + tabTitles + '</ul>');
    $(".tab_container .tab, .tab_container .tab h2").hide();
    $("ul.tabs li:first").addClass("first");

    //This chooses the first item when nothing else is selected.
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_container .tab:first").show();

    //ON Click Event
    $("ul.tabs li").unbind().click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_container > .tab").hide();
        var activeTab = $(this).find("a").attr("hash");
        $(activeTab).show();
       return false;
    });


    $(document).ready(function() {
        var activeTab = location.href;
        var activeTabId = activeTab.substring(activeTab.lastIndexOf('#')+1);
        var activeTab = $(activeTabId).prev('li');
        //$(activeTab).addClass("active");

        //alert($(activeTabId));

        //alert($(activeTab).html());
        return false;
    });


}

这是html片段。

<body class="home">
        <div class="heading">
            <br/><br/><br/><br/><br/><br/><br/>
            bla bla bla heading text goes here.
            <br/><br/><br/><br/><br/><br/><br/>
        </div>
        <div class="tab_container">
            <div class="tab">
                <div class="sp3column">
                <h2>Tab 1</h2>
                    bla bla bla Tab 1 text goes here.
                </div>
            </div>
            <div class="tab">
                <div class="sp3column">
                    <h2>Tab 2</h2>
                    bla bla bla Tab 2 text goes here.
                </div>
            </div>

            <div class="tab">
                <div class="sp3column">
                    <h2>Tab 3</h2> <!-- tab title -->
                    bla bla bla Tab 3 te xt goes here.
                </div>
            </div>
        </div>

</body>

最佳答案

首先，谢谢您的阅读。我猜只是输入就给了我一些我没有想到的想法。有时退后一步可以使事情变得更清楚。

添加

//To capture querystrings
var urlParams = {};
(function () {
    var match,
    pl     = /\+/g,  // Regex for replacing addition symbol with a space
    search = /([^&=]+)=?([^&]*)/g,
    decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
    query  = window.location.search.substring(1);

while (match = search.exec(query))
    urlParams[decode(match[1])] = decode(match[2]);
})();

在函数的开头创建了数组变量，以支持检查tabid是否存在。

var tabArray = [];

在“ tabTitles”上方，我将“ tabid”添加到新数组中以支持检查tabid是否存在。

tabArray.push(tabid);

修改了定义“ tabTitles”的行，以将li类定义为tabid

tabTitles += '<li class="'+ tabid +'"><a href="#' + tabid  + '"><span>' ...

修改了“ //在没有其他选择时选择第一项。”区域。
请注意，我以这种方式测试tabid是否存在，否则它仍将呈现第一个选项卡，没有人会更明智。这将有助于防止异常行为。

    //Checks to see if querystring for tabid
    if (urlParams["tabid"] !== undefined) {
         //check array to see if tabid exists
        if ($.inArray(urlParams["tabid"], tabArray) !== -1) {
            //Will use the identified tabid and make it the active tab
            $("ul.tabs ."+urlParams["tabid"]).addClass("active").show();
            var activeTab = $("ul.tabs ."+urlParams["tabid"]).find("a").attr("hash");
            $(activeTab).show();
        }else {
            //This chooses the first item when nothing else is selected.
            $("ul.tabs li:first").addClass("active").show();
            $(".tab_container .tab:first").show();
        }
    }else {
        //This chooses the first item when nothing else is selected.
        $("ul.tabs li:first").addClass("active").show();
        $(".tab_container .tab:first").show();
    }

现在，我可以拥有一个链接“ bla.asp？tabid = Tab_2”，第二个选项卡将被选中。

关于javascript - 利用现有代码激活标签页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12629956/

tabId

javascript - 利用现有代码激活标签页