Question

首先，如果我错过了你可能需要的任何东西，并且提出了一个模糊的问题，我就会大肆宣传。我陷入困境，并且已经尝试了好几周才找到解决方案。

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

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

我希望这能让jquery guru出现在那里。

这是处理标签的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>

Answer 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”，第二个标签将被选中。

利用现有代码激活标签

1 个答案: