两个jQuery UI在一个页面上选项卡式的div。一个可以工作，另一个不可以

我有一个带有两个div面板的页面，左边和右边。这两个面板都使用jquery-2.1.4.min.js和jquery-ui.js标签。一个面板有三个选项卡，它可以工作。两个jQuery UI在一个页面上选项卡式的div。一个可以工作，另一个不可以

在我的页面头部的JS是这样的：

$(function(){ 
    // Doesn't matter if following two lines are reversed. Same output. 
    $("#property-card").show().tabs(); // this one doesn't work 
    $("#tabs").show().tabs(); // this one works 
});

的HTML如下：

//This tabbed content works: 
<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Tasks</a></li> 
    <li><a href="#tabs-2">Notes</a></li> 
    <li><a href="#tabs-3">Photos</a></li> 
    </ul> 

    <div id="tabs-1"> 
    <!-- Tasks --> 
    </div> 

    <div id="tabs-2"> 
    <!-- Notes --> 
    </div> 

    <div id="tabs-3"> 
    <!-- Other --> 
    </div>

的其他分区面板看起来是这样的：

//This one shows hyperlinked text within the content area, instead of showing tabs 
<div id="property-card" class="eight columns light-manilla curved10 border-dark border-2 border-ridge padding-1-percent"> 

    <ul> 
    <li><a href="#property">Property</a></li> 
    <li><a href="#property-help">Help</a></li> 
    <li><a href="#property-list-price">List Price</a></li> 
    <li><a href="#property-taxes">Taxes</a></li> 
    <li><a href="#property-hoa">HOA</a></li> 
    <li><a href="#property-showing-instructions">Showing Instructions</a></li> 
    <li><a href="#property-bpo-values">BPO Values</a></li> 
    <li><a href="#property-buyer-leads">Buyer Leads</a></li> 
    </ul> 


    <div id="property"> 

    </div> 

    <div id="property-help"> 

    </div> 

    <div id="property-list-price"> 

    </div> 

    <div id="property-taxes"> 

    </div> 

    <div id="property-hoa"> 

    </div> 

    <div id="property-showing-instructions"> 

    </div> 

    <div id="property-bpo-values"> 

    </div> 

    <div id="property-buyer-leads"> 

    </div> 

</div>

（不确定这是否相关）主线程上的同步XMLHttpRequest由于其detr有助于最终用户的体验。如需更多帮助http://xhr.spec.whatwg.org/jquery-2.1.4.min.js:4:14346 的ReferenceError：数据没有定义（我认为这是一个相关的）jQuery的2.1.4.min.js％20LINE％202％20％3E％20eval：35：1

见内嵌屏幕例如发生了什么事情。

来源

2016-09-19 TARKUS

其中是左侧标签的标签内容？你能提供完整的代码吗？可能也是小提琴，如果你可以 –

首先; xhr错误很可能不相关（尽管它可能会阻止进一步的执行）。但我的猜测是，这只是一个CSS问题。标记是否与'＃tabs' _and_'＃property-card'链接？ – giorgio

你可以测试删除 - “class =”八列轻马尼拉弯曲10边界黑暗边界-2边界岭填充-1％“＆让我知道结果。除了 –

恨回答我的问题，但在我的HTML的底部另一个文件中，有另一个JavaScript块，其“激活”工作DIV标签，但是因为我没有加入新的选项卡式的div（因为我没有意识到第二个JavaScript块在那里）第二个选项卡式的div没有工作。这是什么使其工作：

$(function() { 
    $('#property-card').tabs({ 
     activate: function (event, ui) { 
      var $activeTab1 = $('#property-card').tabs('option', 'active'); 
     } 
    }); 
    $('#tabs').tabs({ 
     activate: function (event, ui) { 
      var $activeTab2 = $('#tabs').tabs('option', 'active'); 
      if ($activeTab2 == 2) { 
       // HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED 
       $("#mls-images-carousel").css("display","block"); 
       retrieveAssetImages('<?php echo $as_id; ?>'); 
      } 
      else{ 
       $("#mls-images-carousel").css("display","hidden"); 
      } 
     } 
    }); 
});

来源

2016-09-19 16:38:05 TARKUS

两个jQuery UI在一个页面上选项卡式的div。一个可以工作，另一个不可以

回答

相关问题