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

时间:2014-03-17 06:07:36

标签: c# javascript jquery

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

3 个答案:

答案 0 :(得分:1)

如果您正在使用JQueryUI,只需使用hashtag并指向选项卡ID,jquery将完成剩下的工作:

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

修改

很抱歉被误解了,你没有使用JQueryUI。这是我的新答案:

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

答案 1 :(得分:1)

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:  

。主动 {     背景:绿色; }     

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

答案 2 :(得分:0)

你必须做两件事。

1)检测查询字符串 2)触发&#34;标签&#34;发射(就像用户点击它一样)。

由于您没有为JSFiddle提供代码工作,我将根据您的代码告诉您这应该如何工作。

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.NET提供的ScriptManager。它允许您与客户端脚本进行通信,因此您可以使用它来执行您需要的操作

编辑:我更新了openTab()的JavaScript函数。您可以看到一个示例小提琴在这里工作,第二个标签打开

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