Question

我有一个带有两个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

请参阅内联屏幕截图示例，了解正在进行的操作。

Answer 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");
            }
        }
    });
});

一页上有两个jquery ui tabbed div。一个有效，另一个没有

1 个答案: