10

基盤付きのaspを使用していますが、JSまたはASPを使用してタブを別のタブに切り替える方法はありますか？

リンク（シンプルタブ）。

4

6 に答える 6

19

考えられる解決策は、タブリンクにIDを割り当て、jQueryを使用してクリックすることです。

次のコードの抜粋を前提として、アンカーリンクに割り当てられたIDに注意してください。

<dd><a href="#simple2" id="tabId">Simple Tab 2</a></dd>

このリンクは、jQueryのこの行を使用してアクティブ化できます。

$("#tabId").click();
于 2012-12-06T05:43:01.307 に答える
4

HTMLでデフォルトで最初のタブと最初のLI.activeを指定すると、

<div id="#TheTabs" class="twelve columns">

    <dl class="nice contained tabs">
        <dd><a href="#FirstTab" class="active">First Tab</a></dd>
        <dd><a href="#SecondTab">Second Tab</a></dd>
    </dl>

    <ul class="nice contained tabs-content">
        <li id="FirstTabLI" class="active">
            <div class="row">
                <div class="twelve columns">
                </div>
            </div>
        </li>
        <li id="SecondTabLI">
            <div class="row">
                <div class="twelve columns">
                </div>
            </div>
        </li>
    </ul>

</div>

次に、JavaScriptでタブを変更できます。

if ( activeTab == 2 ) {

    // Clear tab 1
    $('#TheTabs dl dd a[href="#FirstTab"]').removeClass("active");
    $('#FirstTabLI').removeClass("active");

    // Select tab 2
    $('#TheTabs dl dd a[href="#SecondTab"]').addClass("active");
    $('#SecondTabLI').addClass("active");

}
于 2013-06-01T11:04:19.897 に答える
3

これは、各リストアイテムにIDを追加せずに、URLの場所にハッシュを保持することなく実行できます。

あなたがこのコードを持っているとしましょう：

  <div id="my-menu" class="menu">
    <ul class="vertical tabs">
      <li class="active"><a href="#overview">Overview</a></li>
      <li><a href="#feedback">Feedback</a></li>
    </ul>
  </div>

次に、ページのどこでもこれを行うことができます。

<a href="#feedback" onclick="$('#my-menu a[href=\'#feedback\']').click()">Feedback</a>
于 2013-02-02T10:49:43.110 に答える
2

バージョン3.0ではactive、タブdl.tabs ddでのクラスを設定し、ul.tabs-content liそれらを切り替えることができます。コードまたはJavaScriptでそれを行うことができます。

于 2013-01-29T20:48:26.730 に答える
0

これを試して：

$('#yourTabsContainer').on('click', '.yourNextButton', function(event) {
       event.preventDefault();
       $('.active').removeClass('active').next().addClass('active');
});

そしてこの前のボタン（必要な場合）

$('#yourTabsContainer').on('click', '.yourPreviousButton', function(event) {
       event.preventDefault();
       $('.active').removeClass('active').prev().addClass('active');
});

それは私のために働いています...

于 2014-08-20T09:04:43.160 に答える
0

Foundation v5では、toggle_active_tab関数を使用できます。

var $secondTab = $('ul.tabs > li:nth-child(2)');

Foundation.libs.tab.toggle_active_tab($secondTab, 'optional_location_hash')

于 2018-09-12T18:46:39.597 に答える