如何从c#代码后面选择jQuery选项卡

本文关键字：选择 jQuery 选项 代码 | 更新日期: 2023-09-27 17:50:44

我使用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>

如何从c#代码后面选择jQuery选项卡

如果您使用的是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);
演示工作

HTML: 

<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();
            }
        }
    }
CSS: 

<style type="text/css">
.active {
    background:Green;
}
</style>
jQuery: 

<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>

你必须做两件事:

  1. 检测查询字符串
  2. 触发"标签;触发(就好像用户正在点击它一样)。
1)在你的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)在JavaScript中，只需创建一个新方法 
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");
    });
}

我没有测试这个抱歉，只是给它一个尝试!

这里的关键是ASP使用的ScriptManager。净了。它允许您与客户端脚本通信，因此您可以使用它来执行

所需的操作。

EDIT:我更新了openTab()的JavaScript函数。您可以在这里看到一个示例，在load

上打开第二个选项卡。http://jsfiddle.net/y8Wuw/10/

相关文章：