ASP.NET展望動態控制jQuery的多標籤搜索

Question

我有以下的Jquery其中有4個標籤，其具有4次不同的搜索

即

1）產品名稱搜索 2）供應商的搜索 等

這是Jquery的

<script type="text/javascript"> 

$(document).ready(function() { 

    //Default Action 
    $(".tab-content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab-content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab-content").hide(); //Hide all tab content 
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active content 
     return false; 
    }); 
}); 
</script> 

這裏是標籤

 <ul class="tabs"> 
     <li><a href="#tab1">By Product Name</a></li> 
     <li><a href="#tab2">By Supplier</a></li> 
     <li><a href="#tab3">By EAN Code</a></li> 
     <li><a href="#tab4">By IPU Code</a></li> 
    </ul> 
    <div id="tab1" class="tab-content"> 
     <asp:textbox id="searchProductName" runat="server"></asp:textBox> <asp:Button ID="btnProductSearch" runat="server" Text="Search Product Name" CssClass="search" OnClick="ProductSearch_Click" UseSubmitBehavior="true" CausesValidation="false" /> 
    </div> 

    <div id="tab2" class="tab-content"> 
     <asp:textbox id="searchSupplierName" runat="server"></asp:textBox> <asp:Button ID="btnSupplierSearch" runat="server" Text="Search Supplier Name" CssClass="search" OnClick="SupplierSearch_Click" /> 
    </div> 

    <div id="tab3" class="tab-content"> 
     <asp:textbox id="searchEANCode" runat="server"></asp:textBox> <asp:Button ID="btnEANSearch" runat="server" Text="Search EAN Code" CssClass="search" OnClick="EANSearch_Click" /> 
    </div> 

    <div id="tab4" class="tab-content"> 
     <asp:textbox id="searchIPUCode" runat="server"></asp:textBox> <asp:Button ID="btnIPUSearch" runat="server" Text="Search IPU Code" CssClass="search" OnClick="IPUSearch_Click" /> 
    </div> 

現在問題是我每次執行搜索時，即在第二個選項卡供應商頁面刷新和選項卡被重置爲第一個選項卡。

在我的onclick方法中，是否有無論如何我設置的標籤顯示第二個頁面刷新時。

即

Protected Sub SupplierSearch_Click(ByVal sender As Object, ByVal e As EventArgs) 
    ' Filter by Supplier 
    If searchSupplierName.Text.Length > 0 Then 
     srcProductListPerCustomer.FilterExpression = " (supplier_name like '%" + searchSupplierName.Text.ToString & "%')" 
     productListTable.DataBind() 
    End If 
End Sub 

Answer 1

你可以做的是，添加一個公共屬性到你的頁面類中，如ActiveTabId，這個屬性將包含標籤的ID來設置活動，默認情況下，您可以將其設置爲1，即在開始時顯示第一個選項卡......並且當從供應商選項卡將其設置爲2並在您的aspx頁面中發生回發時，在javascript代碼塊中調用適當選項卡的.addClass()和.show()方法.....

在後面的代碼：

Private _activeTabId As String 

    Public Property ActiveTabId() As String 
     Get 
      Return _activeTabId 
     End Get 
     Set(ByVal value As String) 
      _activeTabId = value 
     End Set 
    End Property 

    Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load 
     Me._activeTabId = 1 
    End Sub 

Protected Sub SupplierSearch_Click(ByVal sender As Object, ByVal e As EventArgs) 
     'set tab id 
     Me._activeTabId = 2 

     ' Filter by Supplier 
     If searchSupplierName.Text.Length > 0 Then 
      srcProductListPerCustomer.FilterExpression = " (supplier_name like '%" + searchSupplierName.Text.ToString & "%')" 
      productListTable.DataBind() 
     End If 
    End Sub 

，並在您的PX頁面，javascript代碼塊中：

<script type="text/javascript"> 
     var activeTabId = '<%=ActiveTabId %>'; 
     $(document).ready(function() {  
      switch(activeTabId) { 
       case 1: 
        //for tab 1 
        $(".tab-content").hide(); //Hide all content 
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
        $(".tab-content:first").show(); //Show first tab content 

       case n: 
        //for tab n 
        $(".tab-content").hide(); //Hide all content 
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
        $(".tab-content:first").show(); //Show first tab content 
      } 

      //On Click Event 
      $("ul.tabs li").click(function() { 
       $("ul.tabs li").removeClass("active"); //Remove any "active" class 
       $(this).addClass("active"); //Add "active" class to selected tab 
       $(".tab-content").hide(); //Hide all tab content 
       var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
       $(activeTab).fadeIn(); //Fade in the active content 
       return false; 
      }); 
     }); 
    </script> 

之間的JavaScript代碼，可以優化，但我的版本是隻爲指南的目的...

Answer 2

你可以嘗試添加哈希您的網址像http://www.myurl.com/page.aspx#tab2結束。然後在document.ready函數中，您可以選擇他們點擊的標籤。您可能需要查看使用jQuery BBQ plugin的example。 （我之前在其他項目中使用過這個插件，它的效果很好。）