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

Question

I am using jQuery tabbed content.

<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

(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);

Tabs are working fine. When a page is requested from another page, I want the selected tab according to the query string value. For example if I pass

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

then Tab1 should be selected. If I pass

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

then Tab2 should be selected.

Answer 1

If you are using jQuery UI, just use hashtag and point to the tab ID; jQuery will do the rest:

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

If you are not using jQuery UI, follow these instructions:

Use hashchange event is better to defined which tab is clicked. I have modified your code a bit, check it out.

(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

Answer 2

<asp:HiddenField runat="server" ID="hdn" />

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            if (Request.QueryString["tab"] != null)
            {
                hdn.Value = Request.QueryString["tab"].ToString();
            }
        }
    }

<style type="text/css">

.active {
    background:Green;
}
</style>

<script type="text/javascript">

    $(document).ready(function () {
        // constants
        var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';
        $('.tabs').tabs();
          
        var class_1 = $('#<%= hdn.ClientID %>').val();
        $('.tabs > li').find('a').removeClass('active');
        $('.tabs > li').each(function (index) {
            if ($(this).find('a').attr('id') == class_1) {
                $(this).find('a').addClass('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);
        });
    });
</script>

Answer 3

There are two things you must do:

1. Detect the query string
2. Trigger a "tab" to fire (as if the user was clicking it).

1) In your Page.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    //Get the query string called tab
    private string tab = Request.Querystring("tab");
    //Check that query string is not null

    if(tab!=null)
    {
       //Run JavaScript. NB: the parameter passed to this is based off our query string
       ScriptManager.RegisterStartupScript(this, typeof(string), "Registering", String.Format("openTab('{0}');", tab), true);
    }
    
}

2) In your JavaScript, just create a new method

function openTab(tab) {
    //Will fake a user "click" for the tab that aSP.NET told it to open
    $(".tabs li a").each(function(){
        var id = $(this).attr("href").replace("#", "");
        if(id==tab) $(this).trigger("click");
    });
}

I have not tested this sorry, just give it a try!

The key here is the ScriptManager that ASP.NET offers. It lets you communicate with a client side script, so you can just use this to do what you need to

EDIT : I updated the JavaScript function of openTab() . You can see an example fiddle working here with the 2nd tab opening on load

http://jsfiddle.net/y8Wuw/10/