2012-11-14 305 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