3

2つのタブがあるjqueryタブコンテナがあります。今私が欲しいのは、最初は2番目のタブが無効になることです。最初のタブのボタンをクリックすると、2番目のタブが有効になり、自動的に開きます。

<script type="text/javascript">
    $(document).ready(function() {
    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });

      });
</script>

<div class="tab-wrapper" id="tab-wrapper">
    <div class="tab-header">
        <ul class="tabs">
                <li><a href="#tab1">overview</a></li>
                <li><a href="#tab2">details</a></li>
            </ul>
    </div>
    <div class="tab_container">
            <div id="tab1" class="tab_content">
                here is the list of the overview
        </div>
            <div id="tab2" class="tab_content">
                Particular Details
            </div>
        </div>
</div>
4

4 に答える 4

5

あなたは以下を使うことができます

$("#tabs").tabs({disabled: [0,1]});

そして、ゼロインデックスの数値を使用して、無効にするものを選択します。タブを有効にするには、次を使用できます。

$("#tabs").tabs({disabled: false });

選択したタブを設定するには、 jQueryタブから次の例を使用できます。

var $tabs = $('#tabs').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});
于 2012-10-09T00:30:59.597 に答える
2

デフォルトでそれらすべてを無効にしてから、最初のものを有効にします。その後、ボタンはかなりシンプルになるはずです。これはすべて非常に単純なはずです。

まず、jQuerytabs('disable')は機能しません。そこで、それらすべてを無効にする独自の関数を作成しました。ここにあります：

function disableTabs(obj){
    var c = obj.find("ul li").size();
    for(var i=0;i<c;i++){
        obj.tabs("disable", i);
    }
}

次のように使用できますdisableTabs($('#myTabs'))。jQueryでは現在のタブを無効にすることはできません。これはページの読み込み中なので、最初のタブになります。次に、いくつかのデータを格納するためにいくつかの変数を作成する必要があります...

var openTab = 0;
var currTab = 0;

次に、それを処理するためのいくつかの関数...

function enableTab(obj, num){
    obj.tabs("enable", num);
}
function next(){
    openTab++;
    currTab++;
    enableTab($(".tabs"), currTab);
    $(".tabs").tabs("select", currTab);
}
function prev(){
    openTab--;
    currTab--;
    $(".tabs").tabs("select", currTab);
}

次に、いくつかのイベントハンドラーをアタッチします。

$('#myTab').bind('tabsshow', function(event, ui) {
    currTab = ui.index;
});
$(".next").click(function(){
    next();
});
$(".prev").click(function(){
    prev();
});

これらのボタンのHTMLは本当にシンプルです。

<a class='prev'>Previous</a>
<a class='next'>Next</a>

これがお役に立てば幸いです。

ところで：私はあなたが見たいと思うかもしれないいくつかの完全に機能するタブをここに持っています。

于 2011-04-14T14:05:42.007 に答える
0

これに取り組む方法は、ボタンがクリックされたかどうかを追跡する変数を使用し、デフォルトで「false」に設定し、ボタンがクリックされたときに「true」に設定することです。

タブリンクのクリックイベント内でこの変数の値を確認すると、新しいタブを表示するか、何もしないか、メッセージを表示するかを決定できます。

これが実際の例です：http：//jsbin.com/ijoco5

于 2011-04-14T10:43:55.520 に答える
0

内部タブクラスではないボタンをクリックしていて、2番目のタブを開きたい場合は、次のようなトリガーイベントを追加できます。

$('.tabs > #tab2').trigger('click');

そして、liにidを与えます> a：<a id="tab1" href="#tab1"></a>

于 2011-04-14T12:27:40.693 に答える