1

首先，如果我遗漏了您可能需要的任何东西以及一个模糊的问题，我会道歉。我陷入了困境，并且已经尽力了几个星期来找到解决方案。

我有以下代码，它是选项卡选择代码。我不太了解 jquery，只知道足够的 JavaScript 来掌握基础知识。我并不真正理解下面的所有代码，但我确实知道它控制了当您单击选项卡和页面初始加载时会发生什么。正确的？

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

我希望这对 jquery 大师有帮助。

这是处理选项卡的 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>
4

1 回答 1

1

首先，感谢您的阅读。我想只是打字给了我一些我没有想到的想法。有时退后一步会让事情变得更清楚。

添加

//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”，第二个选项卡将被选中。

于 2012-09-28T13:53:29.390 回答