javascript - 如何从后面的 C# 代码中选择 jQuery 选项卡？

Question

我正在使用 jQuery 选项卡式内容。

<div class="container">
    <ul class="tabs">
        <li>
            <a id= "tab1" runat="server" href="#tab1" class="active" >Tab1</a>
        </li>
        <li>
            <a id= "tab2" runat="server" href="#tab2" >Tab2</a>
        </li>
           
    </ul>
    <div id="div1" class="form-action show">
    ........
    </div>

    <div id="div2" class="form-action hide">
    .......
    </div>      
</div>

jQuery 函数

(function ($) {
    // constants
    var SHOW_CLASS = 'show',
  HIDE_CLASS = 'hide',
  ACTIVE_CLASS = 'active';
  
    $('.tabs').on('click', 'li a', function (e) {
        e.preventDefault();
        var $tab = $(this),
     href = $tab.attr('href');

        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);

        $('.show')
    .removeClass(SHOW_CLASS)
    .addClass(HIDE_CLASS)
    .hide();

        $(href)
    .removeClass(HIDE_CLASS)
    .addClass(SHOW_CLASS)
    .hide()
    .fadeIn(550);
    });
})(jQuery);

标签工作正常。当从另一个页面请求一个页面时，我希望根据查询字符串值来选择选项卡。例如，如果我通过了

<a href="Page.aspx?tab=tab1">Tab1</a>

那么应该选择 Tab1。如果我通过了

<a href="Page.aspx?tab=tab2">Tab2</a>

那么应该选择 Tab2。

Answer 1

如果您使用的是 jQuery UI，只需使用 hashtag 并指向选项卡 ID； jQuery 将完成剩下的工作:

<a href="Page.aspx#tab2">Tab2</a>

如果您不使用 jQuery UI，请按照以下说明操作:

使用hashchange事件更好地定义单击哪个选项卡。我对你的代码做了一些修改，请检查一下。

(function ($) {
    // constants
    var SHOW_CLASS = 'show',
  HIDE_CLASS = 'hide',
  ACTIVE_CLASS = 'active';

    $(window).on('hashchange', function() {
        href = window.location.hash;
        if (href == "") return;
        $('.tabs li a').removeClass('active');
        $('.tabs li a[href=' + href + ']').addClass('active');
        
        $('.show')
    .removeClass(SHOW_CLASS)
    .addClass(HIDE_CLASS)
    .hide();

        $(href)
    .removeClass(HIDE_CLASS)
    .addClass(SHOW_CLASS)
    .hide()
    .fadeIn(550);
    });
    $(window).trigger('hashchange'); // If the page is loaded from another page
})(jQuery);

Working demo