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」というリンクが作成され、2 番目のタブが選択されます。

于 2012-09-28T13:53:29.390 に答える