Bootstrap 4，CSS -隐藏选项卡菜单上的文本

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#home">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile">个人资料</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#messages">消息</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#settings">设置</a>
  </li>
</ul>

.nav-link {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

<div class="tab-content">
  <div id="home" class="tab-pane fade show active" data-content="这是首页的内容">
    <!-- 首页的内容 -->
  </div>
  <div id="profile" class="tab-pane fade" data-content="这是个人资料的内容">
    <!-- 个人资料的内容 -->
  </div>
  <div id="messages" class="tab-pane fade" data-content="这是消息的内容">
    <!-- 消息的内容 -->
  </div>
  <div id="settings" class="tab-pane fade" data-content="这是设置的内容">
    <!-- 设置的内容 -->
  </div>
</div>

$(document).ready(function(){
  $(".nav-link").click(function(){
    var content = $(this).attr("href");
    $(".tab-pane").hide();
    $(content).show();
  });
});