Question

我为WPBakery插件创建了一个模块，该模块允许用户将tab item拖放到选项卡容器中。只是我所指的视觉效果：

外部容器将生成parent和ul类，然后为每个添加的新Tab Item生成一个新的.tab__item类，对于我来说，该类包含标头和图像。

.tab__item的伪代码如下：

<div class="tab__item">

  <div class="tabbedContent__left">
    <!-- header will be here -->
  </div>
  
  <div class="tabbedContent__right">
  <!-- image will be as a background image on this div -->
  </div>
  
</div>

当悬停header时，.tabbedContent__right将在该.tab__item下显示相应的图像。

我遇到的问题是，对于后端中添加的每个新Tab Item，它将生成一个新的.tab__item div，该div显然具有自己的.tabbedContent__right div。这意味着当悬停新的标头时，.tabbedContent__right div会向下移动。

最好通过演示对此进行解释：

$(document).ready(function() {

  $('.tabs__li .header').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('.tab__item').removeClass('active');

    $(this).addClass('active');
    $("#" + tab_id).addClass('active');
  })

  // add class .active on li hover
  $('.tabs__li').mouseenter(function() {
    $('.tab__item').removeClass('active');
    $(this).parents('.tab__item').addClass('active');
  });

  // Change active tab every x seconds
  $(function() {
    var list = $(".tab__item"),
    currentActive = 0;
    time = 5; //interval in seconds
    setInterval(function() {
        currentActive = (currentActive + 1) % list.length;
        list.removeClass('active').eq(currentActive).addClass('active');
    }, time * 1000);
  });

})

.tabbedContent ul {
    margin: 0;
    padding: 0;
}

.tabbedContent__left, 
.tabbedContent__right {
    flex-basis: 50%;
}

.tabbedContent__left {
    margin: 0;
}
.tabbedContent__left .tabs__li {
    list-style-type: none;
    padding-left: 10px;
}
.tabbedContent__left .tabs__li span.header {
    font-size: 2.313rem;
    font-family: "HelveticaNeue-bold", Helvetica, sans-serif;
    color: #ABABAB;
    cursor: pointer;
}
.tabbedContent .tab__item.active .tabbedContent__left li.tabs__li span.header {
    color: #454544;
}

.tabbedContent__right {
    display: none;
    min-height: 325px;
    background-repeat: no-repeat;
    background-size: contain;
}
.tabbedContent .tab__item.active .tabbedContent__right {
    display: block;
}

<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="tabbedContent">
  <ul class="tabs d-flex flex-column">

    <!-- container for 1 -->
    <div class="tab__item d-flex flex-column flex-md-row active">
      <div class="tabbedContent__left">
        <li class="tabs__li" data-tab="tab-1">
          <span class="header"> Header </span>
        </li>
      </div>
      <div class="tabbedContent__right" id="tab-1'" style="background-image:url(http://oi68.tinypic.com/5a50me.jpg);"></div>
    </div>
    <!--------->
    
    <!-- container for 2 -->
    <div class="tab__item d-flex flex-column flex-md-row active">
      <div class="tabbedContent__left">
        <li class="tabs__li" data-tab="tab-2">
          <span class="header"> Header 2 </span>
        </li>
      </div>
      <div class="tabbedContent__right" id="tab-2'" style="background-image:url(http://oi65.tinypic.com/2zdr4f7.jpg);"></div>
    </div>
    <!--------->
    
        <!-- container for 3 -->
    <div class="tab__item d-flex flex-column flex-md-row active">
      <div class="tabbedContent__left">
        <li class="tabs__li" data-tab="tab-3">
          <span class="header"> Header 3 </span>
        </li>
      </div>
      <div class="tabbedContent__right" id="tab-3'" style="background-image:url(http://oi68.tinypic.com/5a50me.jpg);"></div>
    </div>
    <!--------->

  </ul>
</div>

Working JSFiddle here

从上面的演示中可以看到，.tabbedContent__right div的高度（和多个）的存在会导致页眉之间出现间隙。

我想做什么：

我无法更改标记结构（即tab__item必须具有tabbedContent__left和tabbedContent__right）。但是我不希望生成多个.tabbedContent__right div，仅一个。像这样：

有没有一种方法可以操纵我当前的标记，使其仅显示一个，但仍然可以像通过JS在演示中一样起作用？

更多信息：

创建div的JS是什么样的？

我还没有为此创建任何JS（因为我不确定这是否是最好的方法）。我关于这个模块的所有JS都在上面的演示中。

将选项卡项拖放到容器中后，会发生什么？

这是模块后端的外观：

添加Tab Item后，将生成以下标记：

<div class="tab__item">

  <div class="tabbedContent__left">
    <span class="header">' . $tab_header . '</span>
  </div>

  <div class="tabbedContent__right" style="background-image:url('.$background_img.');"></div>

</div>

将多个div转换为一个

0 个答案: