js不点击tab栏文本依旧能显示

要实现在不点击tab栏的情况下显示文本，可以使用JavaScript的事件监听功能。具体步骤如下：

给tab栏的每个选项添加一个唯一的标识符，例如id或者自定义属性。
获取所有tab选项的DOM元素，可以使用querySelectorAll()函数，将它们保存在一个数组中。
给每个tab选项添加一个click事件监听器，当点击时，切换选项的样式，并显示对应的文本内容。
在页面加载完成后，使用JavaScript代码模拟点击默认选中的tab选项，以显示对应的文本内容。

以下是一个示例代码：

HTML：

<div id="tab-container">
  <div class="tab" id="tab-1">Tab 1</div>
  <div class="tab" id="tab-2">Tab 2</div>
  <div class="tab" id="tab-3">Tab 3</div>
</div>

<div id="content-container">
  <div class="content" id="content-1">Content 1</div>
  <div class="content" id="content-2">Content 2</div>
  <div class="content" id="content-3">Content 3</div>
</div>

CSS：

.tab {
  display: inline-block;
  padding: 10px;
  background-color: gray;
  color: white;
  cursor: pointer;
}

.content {
  display: none;
  padding: 10px;
  background-color: lightgray;
}

JavaScript：

window.addEventListener('DOMContentLoaded', function() {
  var tabs = document.querySelectorAll('.tab');
  var contents = document.querySelectorAll('.content');

  function showContent(tabId) {
    // 隐藏所有内容
    contents.forEach(function(content) {
      content.style.display = 'none';
    });

    // 显示对应的内容
    var contentId = 'content-' + tabId.split('-')[1];
    var content = document.getElementById(contentId);
    content.style.display = 'block';
  }

  tabs.forEach(function(tab) {
    tab.addEventListener('click', function() {
      // 切换选项的样式
      tabs.forEach(function(t) {
        t.classList.remove('active');
      });
      tab.classList.add('active');

      // 显示对应的内容
      showContent(tab.id);
    });
  });

  // 模拟点击默认选中的tab选项
  var defaultTab = document.getElementById('tab-1');
  defaultTab.click();
});

以上代码实现了一个简单的tab栏功能。当点击tab选项时，切换选项的样式并显示对应的内容。在页面加载完成后，会自动模拟点击默认选中的tab选项，以显示对应的文本内容