1

我有一组选项卡，当一个类处于活动状态时，我想添加以下内容：

<hr class="break-sec">

这个类必须在 span 类内和 title-text 类之后，如下所示。这是代码以及必须插入的位置。

<li class="vc_tta-tab vc_active" data-vc-tab="">
  <a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">
      GALLERY 
      <hr class="break-sec">
    </span>
  </a>
</li>

如何使用 jQuery 完成此任务？

4

3 回答 3

3

这是你在想的吗？

$('.vc_tta-title-text').append('<hr class="break-sec">')将在文本之后插入hr右边Span

$('.vc_active .vc_tta-title-text').append('<hr class="break-sec">')

$('.vc_tta-tab').click(function() {
$('.vc_active .vc_tta-title-text').find("hr").remove();
  $('.vc_active').removeClass("vc_active");
  $(this).addClass("vc_active");
  $('.vc_active .vc_tta-title-text').append('<hr class="break-sec">')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="vc_tta-tab" data-vc-tab="">
  <a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">GALLERY 
</span></a>
</li>

<li class="vc_tta-tab vc_active" data-vc-tab="">
  <a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">PAGES 
</span></a>
</li>

<li class="vc_tta-tab" data-vc-tab="">
  <a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">VIDEOS 
</span></a>
</li>

于 2017-02-16T09:59:13.443 回答
2

您可以根据活动的 li使用appendto ，例如：span/.vc_tta-title-textvc_active

$('.vc_active .vc_tta-title-text').append('<hr class="break-sec">');
//OR
$('.vc_active span').append('<hr class="break-sec">');

添加点击事件以使其hr动态附加：

$('body').on('click', '.vc_tta-tab', function(){
    $('.vc_tta-title-text hr').remove(); //remove 'hr' from previous active tab
    $('.vc_active span').append('<hr class="break-sec">'); //Add 'hr' to the new active tab
})

希望这可以帮助。

$('.vc_active .vc_tta-title-text').append('<hr class="break-sec">');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
  <span class="vc_tta-title-text">
    NOT ACTIVE
  </span>
</a>
</li>

<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
  <span class="vc_tta-title-text">
    ACTIVE
  </span>
</a>
</li>

<li class="vc_tta-tab" data-vc-tab="">
<a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
  <span class="vc_tta-title-text">
    NOT ACTIVE
  </span>
</a>
</li>
<ul>

于 2017-02-16T09:59:22.723 回答
0

混合内容总是有点复杂，但append应该这样做：

$('span.vc_tta-title-text').append($('<hr class="break-sec">'));

（将新内容放入 jQuery 对象中会将其转换为 DOM 元素。）

于 2017-02-16T10:01:01.407 回答