विशिष्ट टैब का चयन करने वाले jQuery टैब

Question

मेरे पास एक पृष्ठ है जिसमें jQuery टैब का एक सेट है। सभी टैब एक ही लक्ष्य div पर इंगित करते हैं, लेकिन इसे AJAX के माध्यम से अलग-अलग सामग्री के साथ लोड करते हैं। जब मैं प्रारंभिक पूर्ण पृष्ठ लोड करता हूं तो मुझे विभिन्न कारकों के आधार पर सक्रिय टैब को अलग-अलग सेट करने की आवश्यकता होती है। लक्ष्य div में सामग्री पहले से ही इस प्रारंभिक लोड के लिए सर्वर पर सेट है, इसलिए मुझे टैब पर क्लिक करने की आवश्यकता नहीं है, मुझे बस सही टैब को 'चयनित' पर सेट करने की आवश्यकता है। मैंने प्रासंगिक "ली" एचटीएमएल तत्व की कक्षा को "यूई-टैब-चयनित" में सेट करने का प्रयास किया है। इसका प्रारंभिक वांछित प्रभाव है, लेकिन पृष्ठ लोड होने के बाद एक और टैब चुनने पर प्रीइलेक्टेड एक बंद नहीं होता है, जिससे दो टैब चुने जाते हैं।

तो, क्या किसी को टैब को पूर्व निर्धारित करने के लिए वैकल्पिक तरीका पता है (इसे क्लिक किए बिना), या अजीब "यूई-टैब-चयनित" व्यवहार का समाधान जो मैं देख रहा हूं।

धन्यवाद।

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

और सी # टुकड़ा है कि यूएल बनाता है:

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

एक और संस्करण:

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

आप अपने टैब टॉगल समारोह के अंदर पहली पंक्ति हो सकता था चयनित वर्ग को हटा दें:

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

Answer 2

जो आप खोज रहे हैं वह selected option है। जैसे

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

Answer 3

बदलें इस:

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

इस के लिए

:

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

संपादित करें: और ...

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

समाधान, जोड़ सकते हैं और वर्गों को दूर करने के था जैसा कि ethagnawl सुझाव दिया। निम्नलिखित सी # दोनों यूएल बनाया गया है, साथ ही आवश्यक jQuery स्क्रिप्ट इंजेक्शन दोनों दिखाता है। महत्वपूर्ण बिट शो में है: फ़ंक्शन जहां कक्षाओं का उपयोग किया जा रहा है। यह कोड है जो समस्या के आसपास काम करता है।

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

किसी और मामले किसी में यहाँ जवाब की तलाश में आता है, वर्तमान एक टैब का चयन करने के लिए जिस तरह से (इस तारीख के रूप में) (jQuery यूआई 1.10) "सक्रिय" विकल्प का उपयोग करने के लिए है:

निर्दिष्ट सक्रिय विकल्प के साथ टैब प्रारंभ:

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

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