2012-11-14 302 views
1

我有一個頁面,其中包含幾個顯示類似內容的選項卡,以確保我在正確的選項卡中訪問正確的字段,我想清除選項卡的內容只要用戶點擊一個標籤,其他標籤。jQueryUI選項卡:選擇選項卡時清除其他選項卡的div

這是我使用的代碼:

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>WebShop</title> 
    <link rel="stylesheet" type="text/css" href="/includes/igepa.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 


    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>  

    <script> 
    $(function() { 
     $("#tabs").tabs({ 
      beforeLoad: function(event, ui) { 
       ui.jqXHR.error(function() { 
        ui.panel.html(
         "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
         "If this wouldn't be a demo."); 
       }); 
      }, 
      load: function(event, ui){ 
       $('.ui-tabs-hide').empty(); 
      }       
     }); 
    }); 
    </script> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
     <li><a href="/itemStructPaper/Enveloppen">Enveloppen</a></li> 
     <li><a href="/itemStructPaper/GrafischKarton">Grafisch karton</a></li> 
    </ul> 
</div> 


</body> 
</html> 

我在這裏補充一個例子:http://www.igepa.be/phdj/tabs/index.htm

page1.htm和page2.htm都有與他們同場,但一個形式不同的值,但是當您選擇第二頁的選項卡時,您將獲得第一頁的字段值。

回答

5

你可以把它用ui參數指的是它的兄弟姐妹,這樣做:

beforeLoad: function(event, ui){ 
     $(ui.panel).siblings('.ui-tabs-panel').empty(); 
    } 

更新:我剛剛更新,以上只是改變loadbeforeLoad事件,這樣的兄弟姐妹我的代碼在執行當前選項卡的頁面之前刪除選項卡內容。

+0

感謝納爾遜的快速響應,但這也不起作用,我後面的是清除其他標籤的div字段的html內容的方法,如果有人點擊tab2,div標籤-1和如果在此示例中有三個選項卡,則清除選項卡3。 – PhDJ

+0

我認爲我的回答是正確的,但也許不是你正在尋找的東西,但你必須澄清這一點..順便說一句,你的測試頁http://www.igepa.be/phdj/tabs/index.htm警報相同的文本,因爲您有來自'page1.htm'和'page2.htm'的文本輸入具有相同的id'id =「field1」',且ID必須是唯一的,因此您完全知道正在使用的元素。 – Nelson

+0

這正是我的觀點尼爾森,我想用標籤來顯示相同​​的頁面(與他們相同的領域),但具有不同的參數,所以我希望頁面「忘記」關於tab1當用戶選擇標籤2 – PhDJ