Question

我需要某种方式来破解基础选项卡功能，以便我可以在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

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

1 个答案: