内容为空时隐藏选项卡和内容

Question

这是选项卡的结构。在无法编辑 HTML 的情况下，当内容为空时是否可以隐藏选项卡和内容？我在下面提供了最小的 jQuery，但我无法按照我的意愿弯曲它并且感到困惑。我感谢任何帮助。

<div class="et_pb_module et_pb_tabs et_pb_tabs_0_tb_body et_slide_transition_to_1 et_slide_transition_to_2 et_slide_transition_to_3 et_slide_transition_to_5 et_slide_transition_to_0">
  <ul class="et_pb_tabs_controls clearfix">
    <li class="et_pb_tab_0_tb_body et_pb_tab_active" style="height: 50.5938px;"><a href="#">Description</a></li>
    <li class="et_pb_tab_1_tb_body" style="height: 50.5938px;"><a href="#">Specifications</a></li>
    <li class="et_pb_tab_2_tb_body" style="height: 50.5938px;"><a href="#">Videos</a></li>
    <li class="et_pb_tab_3_tb_body" style="height: 50.5938px;"><a href="#">Downloads</a></li>
    <li class="et_pb_tab_4_tb_body" style="height: 50.5938px;"><a href="#">What's Included</a></li>
    <li class="et_pb_tab_5_tb_body" style="height: 50.5938px;"><a href="#">Compare Similar</a></li>
  </ul>
  <div class="et_pb_all_tabs">
    <div class="et_pb_tab et_pb_tab_0_tb_body clearfix et_pb_active_content et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">Tab 1 Product Description </div>
    <div class="et_pb_tab et_pb_tab_1_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 2 content </div>
    <div class="et_pb_tab et_pb_tab_2_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 3 content </div>
    <div class="et_pb_tab et_pb_tab_3_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 4 content </div>
    <div class="et_pb_tab et_pb_tab_4_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 5 content </div>
    <div class="et_pb_tab et_pb_tab_5_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 6 content </div>
  </div>
</div>

<script>
$(document).ready(function() {
$(".et_pb_tabs_controls").each(function() {
var $tabclass = $(this).addClass('et_pb_tab');
var $txt = $(this).text();
if ($txt == "") {                               
$('a[data-target=#'+$tabclass+']').closest('div').hide();
}
});
});
</script>

Answer 1

您的意思是隐藏链接并在链接为空时隐藏 div ？

如果我们只是隐藏链接，那么无论如何我们都无法导航到 div。

无论如何，这里是您需要执行其中一个或两个操作的代码

$(function() {
  $(".et_pb_tabs_controls li").each(function() {
    $(this).addClass('et_pb_tab');
    var txt = $(this).text().trim();
    if (txt === "") {
      const tabClass = Array.from(this.classList)
        .filter(cls => cls.startsWith('et_pb_tab_'))[0];
        console.log(tabClass)
      $(this).hide()  
      $(`.${tabClass}`).hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="et_pb_module et_pb_tabs et_pb_tabs_0_tb_body et_slide_transition_to_1 et_slide_transition_to_2 et_slide_transition_to_3 et_slide_transition_to_5 et_slide_transition_to_0">
  <ul class="et_pb_tabs_controls clearfix">
    <li class="et_pb_tab_0_tb_body et_pb_tab_active" style="height: 50.5938px;"><a href="#">Description</a></li>
    <li class="et_pb_tab_1_tb_body" style="height: 50.5938px;"><a href="#">Specifications</a></li>
    <li class="et_pb_tab_2_tb_body" style="height: 50.5938px;"><a href="#">Videos</a></li>
    <li class="et_pb_tab_3_tb_body" style="height: 50.5938px;"><a href="#"></a></li>
    <li class="et_pb_tab_4_tb_body" style="height: 50.5938px;"><a href="#">What's Included</a></li>
    <li class="et_pb_tab_5_tb_body" style="height: 50.5938px;"><a href="#">Compare Similar</a></li>
  </ul>
  <div class="et_pb_all_tabs">
    <div class="et_pb_tab et_pb_tab_0_tb_body clearfix et_pb_active_content et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">Tab 1 Product Description </div>
    <div class="et_pb_tab et_pb_tab_1_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 2 content </div>
    <div class="et_pb_tab et_pb_tab_2_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"></div>
    <div class="et_pb_tab et_pb_tab_3_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 4 content </div>
    <div class="et_pb_tab et_pb_tab_4_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 5 content </div>
    <div class="et_pb_tab et_pb_tab_5_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 6 content </div>
  </div>
</div>