一页上有两个 jquery ui 选项卡式 div。一个有效，另一个无效答案

【问题标题】：Two jquery ui tabbed divs on one page. One works, the other doesn't一页上有两个 jquery ui 选项卡式 div。一个有效，另一个无效
【发布时间】：2016-09-19 15:55:54
【问题描述】：

我有一个带有两个 div 面板的页面，一个左侧和一个右侧。两个面板都使用 jquery-2.1.4.min.js 和 jquery-ui.js 进行了标签化。一个面板具有三个选项卡，并且可以正常工作。

我页面头部的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>

另一个 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 已被弃用，因为它会对最终用户的体验产生不利影响。如需更多帮助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

查看内联屏幕截图示例，了解正在发生的事情。

【问题讨论】：

左侧标签的标签内容在哪里？你能提供完整的代码吗？如果可以的话，也可以是小提琴
首先； xhr 错误很可能不相关（尽管它可能会停止进一步执行）。但我的猜测是这只是一个 CSS 问题。标记是否链接到#tabs 和 #property-card？
你能测试一下删除吗？class="eight columns light-manilla curved10 border-dark border-2 border-ridge padding-1-percent" 让我知道结果。除了那个，我没有看到任何可疑的东西
@NikhilNanjappa Hi Nikhil，我刚刚从问题 div 中删除了整个类属性，输出完全相同（但没有自定义样式）。
@TARKUS - 你已经包含了jqueryUI.css ？我已经复制了您的代码，似乎没有问题。你能check here.

标签： javascript jquery html jquery-ui jtabbedpane

【解决方案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");
            }
        }
    });
});

【讨论】：