Các tab jQuery chọn tab cụ thể

Question

Tôi có một trang chứa một tập hợp các tab jQuery. Tất cả các tab trỏ vào cùng một div đích, nhưng tải nó với nội dung khác nhau thông qua ajax. Khi tôi thực hiện tải trang đầy đủ ban đầu, tôi cần đặt tab hoạt động khác nhau tùy thuộc vào các yếu tố khác nhau. Nội dung trong div mục tiêu đã được đặt trên máy chủ cho lần tải ban đầu này, vì vậy tôi không cần phải nhấp vào tab, tôi chỉ cần đặt tab chính xác thành 'đã chọn'. Tôi đã thử đặt lớp của phần tử html "li" có liên quan thành "ui-tabs-selected". Điều này có hiệu quả mong muốn ban đầu, nhưng một khi trang được tải thì khi chọn một tab khác, thẻ được chọn trước sẽ không tắt, để lại hai tab được chọn. Vì vậy, không ai biết một cách khác để chọn trước một tab (mà không gây ra nó được nhấp), hoặc một giải pháp cho hành vi "ui-tab-chọn" lạ mà tôi đang nhìn thấy.

Cảm ơn.

<script type="text/javascript"> 
    $(function() { 
     $("#panelTabs").tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); 
       } 
      } 
     }); 

     $("#panelTabs").tabs({ 
      select: function(event, ui) { 
       getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
      } 
     }); 
    }); 
    </script> 

Và C# fragment đó xây dựng các UL:

StringBuilder tabsLiteral = new StringBuilder(); 
      tabsLiteral.Append("<ul>"); 
      foreach (KeyValuePair<string, Tab> kvp in tabs) 
      { 
       tabsLiteral.Append("<li>"); 
       // Note - the kvp.Value.URI determines what should happen when the Tab is clicked 
       tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); 
       tabsLiteral.Append("</li>"); 
      } 
      tabsLiteral.Append("</ul>"); 
      _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); 

      HtmlGenericControl ctl = new HtmlGenericControl(); 
      StringBuilder html = new StringBuilder(); 
      html.Append("<script type=\"text/javascript\">"); 
      html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 
      html.Append("</script>"); 
      ctl.InnerHtml = html.ToString(); 
      _panelTabs.Controls.Add(ctl); 

Một phiên bản:

StringBuilder tabsLiteral = new StringBuilder(); 
      tabsLiteral.Append("<ul>"); 
      foreach (KeyValuePair<string, Tab> kvp in tabs) 
      { 
       string active = ""; 
       if (currentTabCaption == kvp.Value.Caption) 
       { 
        //active = " class=\"ui-tabs-selected\""; 
       } 
       tabsLiteral.Append("<li" + active + ">"); 
       // Note - the kvp.Value.URI determines what should happen when the Tab is clicked 
       tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); 
       tabsLiteral.Append("</li>"); 
      } 
      tabsLiteral.Append("</ul>"); 
      _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); 

      HtmlGenericControl ctl = new HtmlGenericControl(); 
      StringBuilder html = new StringBuilder(); 
      html.Append("<script type=\"text/javascript\">"); 
      //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
      html.Append(@"$(function() { 
       alert('initialising tabs'); 
       $(""#panelTabs"").tabs({ 
        ajaxOptions: { 
         error: function(xhr, status, index, anchor) { 
          $(anchor.hash).html(""Couldn't load this tab. We'll try to fix this as soon as possible.""); 
         } 
        }, 
        select: function(event, ui) { 
         getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
        } 
       }); 
      });"); 
      html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 
      html.Append("</script>"); 
      ctl.InnerHtml = html.ToString(); 
      //_panelTabs.Controls.Add(ctl); 
      Page.Controls.Add(ctl); 

Answer 1

Bạn có thể có dòng đầu tiên bên trong chức năng chuyển đổi tab của bạn loại bỏ các lớp chọn:

var uiTabsSelected = '.ui-tabs-selected'; 
$(uiTabsSelected).removeClass(uiTabsSelected); 

Answer 2

Những gì bạn đang tìm kiếm là selected option. Ví dụ.

$("#MyTabs").tabs({ 
    selected: 2 
}); 

Answer 3

Thay đổi này:

html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 

Để này:

html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 

Edit: và ...

$(function() { 
     $("#panelTabs").tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); 
       }}, 
      select: function(event, ui) { 
       getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
      } 
     });  

    }); 

Answer 4

Giải pháp là để thêm và loại bỏ các lớp học, như ethagnawl gợi ý. C# sau đây cho thấy cả UL được xây dựng, cộng với việc chèn kịch bản lệnh jQuery cần thiết. Bit quan trọng là trong hàm show: nơi các lớp đang được thao tác. Đó là mã này hoạt động xung quanh vấn đề.

StringBuilder tabsLiteral = new StringBuilder(); 
      tabsLiteral.Append("<ul>"); 
      foreach (KeyValuePair<string, Tab> kvp in tabs) 
      { 
       //string tabClass = " class=\"ui-state-default\""; 
       string tabClass = " class=\"ui-state-default\""; 
       if (currentTabCaption == kvp.Value.Caption) 
       { 
        tabClass = " class=\"ui-tabs-selected\""; 
       } 
       tabsLiteral.Append("<li" + tabClass + ">"); 
       //tabsLiteral.Append("<li>"); 
       // Note - the kvp.Value.URI determines what should happen when the Tab is clicked 
       tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); 
       tabsLiteral.Append("</li>"); 
      } 
      tabsLiteral.Append("</ul>"); 
      _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); 

      HtmlGenericControl ctl = new HtmlGenericControl(); 
      StringBuilder html = new StringBuilder(); 
      html.Append("<script type=\"text/javascript\">"); 
      //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
      html.Append(@"$(function() { 
       $('#panelTabs').tabs({ 
        select: function(event, ui) { 
         getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
        }, 
        show: function(event, ui) { 
         // You MUST set both 'ui-state-active' AND 'ui-tabs-selected' for tab UI to operate properly - if either are missing it doesn't work 
         $('.ui-tabs-selected').removeClass('ui-state-active').removeClass('ui-tabs-selected'); 
         $(ui.tab).addClass('ui-state-active').addClass('ui-tabs-selected'); 

         //$('#panelTabs').tabs('selected',idx); // WOULD have been nice if this had worked, but UI does not keep up 
        } 
       }); 
      });"); 
      html.Append("</script>"); 
      ctl.InnerHtml = html.ToString(); 
      //Page.Header.Controls.Add(ctl); // NEVER place script in the page header when the script must survive an AJAX delivery - it won't run 
      Page.Controls.Add(ctl); // Acceptable to place script on the page, as it WILL survive AJAX delivery 

Answer 5

Trong trường hợp bất cứ ai khác đến đây tìm kiếm câu trả lời, các hiện (kể từ ngày này) cách để chọn một tab (jQuery UI 1.10) là sử dụng các "hoạt động" tùy chọn:

khởi tạo các tab với các tùy chọn hoạt động quy định:

$(".selector").tabs({ active: 1 }); 

http://api.jqueryui.com/tabs/#option-active