为什么第四个选项卡不显示任何数据但前三个选项卡显示？

Question

我在 html 中创建了 4 个不同的选项卡。我可以很好地在所有 4 个选项卡之间切换，但由于某种原因，选项卡 4 不显示其相关内容。我不确定为什么前三个选项卡工作正常并且我能够看到它们的数据，但不能看到选项卡 4。

https://jsfiddle.net/samwhite/2t50egkn/3/

<div class="tabs">
  <ul class="tabs-list">
     <li class="active"><a href="#tab1">Tab 1</a></li>
     <li><a href="#tab2">Tab 2</a></li>
     <li><a href="#tab3">Tab 3<a/></li>
      <li><a href="#tab4">Tab 4<a/></li>
  </ul>
  <div id="tab1" class="tab active">
      <div id="">
        <strong>TAB 1:</strong>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quod doloribus quaerat ab porro at necessitatibus alias molestiae dolores facere rem debitis dolorum inventore, vel error animi deleniti ipsum, labore.
      </div>
  </div>
  <div id="tab2" class="tab">
    <div id="">
        <strong>TAB 2:</strong>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quod doloribus quaerat ab porro at necessitatibus alias molestiae dolores facere rem debitis dolorum inventore, vel error animi deleniti ipsum, labore.
      </div>
  </div>
  <div id="tab3" class="tab">
    <div id="">
        <strong>TAB 3:</strong>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quod doloribus quaerat ab porro at necessitatibus alias molestiae dolores facere rem debitis dolorum inventore, vel error animi deleniti ipsum, labore.
      </div>
  </div>
  <div id="tab4" class="tab">
   <div id="">
        <strong>TAB 4:</strong>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quod doloribus quaerat ab porro at necessitatibus alias molestiae dolores facere rem debitis dolorum inventore, vel error animi deleniti ipsum, labore.
      </div>
  </div>
</div>


$(document).ready(function(){
  $(".tabs-list li a").click(function(e){
      e.preventDefault();
  });
  $(".tabs-list li").click(function(){
      var tabid = $(this).find("a").attr("href");
      $(".tabs-list li,.tabs div.tab").removeClass("active");
      $(".tab").hide();
      $(tabid).show();
      $(this).addClass("active");
  });
});

Answer 1

您的opening/closing“a”标签无效

  <ul class="tabs-list">
     <li class="active"><a href="#tab1">Tab 1</a></li>
     <li><a href="#tab2">Tab 2</a></li>
     <li><a href="#tab3">Tab 3<a/></li> <-- needs to be </a>
      <li><a href="#tab4">Tab 4<a/></li> <-- ditto!
  </ul>

即

  <ul class="tabs-list">
     <li class="active"><a href="#tab1">Tab 1</a></li>
     <li><a href="#tab2">Tab 2</a></li>
     <li><a href="#tab3">Tab 3</a></li> 
      <li><a href="#tab4">Tab 4</a></li> 
  </ul>

Answer 2

选项卡 3 和选项卡 4 的锚结束标记不正确。替换为以下行。

 <li><a href="#tab3">Tab 3</a></li>
 <li><a href="#tab4">Tab 4</a></li>

为什么第四个选项卡不显示任何数据但前三个选项卡显示？

Why the fourth tab is not displaying any data but the first three does?

javascript

jquery

tabs