javascript - 基础选项卡 - 包括选项卡主 div 之外的内容

Question

我需要一些破解 Foundations Tab 功能的方法，这样我就可以包含一个位于 tabs-content div 外部的 div。我对 HTML 标记的控制有限，因此需要使用 JQuery/CSS 对其进行操作。谁能帮忙？

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel_details">Details</a></dd>
  <dd><a href="#panel_desc">Description</a></dd>
  <dd><a href="#panel_image>Images</a></dd>
</dl>
<div class="tabs-content">
  <div class="content active" id="panel_details">
    <p>First panel content goes here...</p>
  </div>
  <div class="content" id="panel_desc">
    <p>Second panel content goes here...</p>
  </div>
   <!-- #panel_image should go here butI can't change the markup-->
</div>


<!--lots more HTML code inbetween-->


  <div class="content" id="panel_image">
    <p>Third panel content goes here...</p>
  </div>

Answer 1

我的 jquery 技能很差，但 JQuery append 函数似乎可以工作。

然后在任何地方定义“额外的”div

JQuery

$( ".tabs-content" ).append( $( "#panel_image" ) );

Codepen Demo