Javascript 引导选项卡式导航故障

我在我的网站上遇到了一些问题。我有一个演示链接在这个脚下

首先，当我单击选项卡时，它们在单击后不会保持活动状态。此外，我只想显示已单击的选项卡内容。现在，它只列出了所有5个div。帮忙

HTML:

$('ul.tabs li').click(function() {
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

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

JS:

$('ul.tabs li').click(function() {
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

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

---

演示：

您可以向SCS添加一个名为

的新类。show tab

.show-tab {
  display: block;
}

此外，您还需要将以下属性添加到

.tab内容中

.tab-content {
  display: none;
}

这允许所有div最初不可见，然后在向div添加
.show选项卡
类后使其可见

然后在HTML中，用
show tab
替换当前的div标记，就像这样（这使得第一个div最初显示）

希望这有帮助。
这是一把小提琴：
这是你想要的吗？嘿，尼克-我想这是我发布的原始链接：）编辑很完美-谢谢！！！！：）这仅仅是对JS的修改吗？我会把它作为一个解决方案来解释。这不仅仅是对您的cssAlso的更改，请添加此作为答案，因为它是正确的，我想奖励您：）
$('ul.tabs li').click(function() {
  var tab_id = $(this).attr('data-tab');

  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('show-tab');

  $(this).addClass('current');
  $("#"+tab_id).addClass('show-tab');
});