javascript简易选项卡

在JavaScript中，创建一个简易选项卡功能可以通过HTML结构和简单的脚本来实现。以下是一个基本的步骤和代码示例：

1. HTML结构：

<div class="tabs">
  <ul id="tab-list">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tab-content">
    <div id="tab1" class="tab-panel active">Content for Tab 1</div>
    <div id="tab2" class="tab-panel">Content for Tab 2</div>
    <div id="tab3" class="tab-panel">Content for Tab 3</div>
  </div>
</div>

2. JavaScript/jQuery (为了简洁，这里使用jQuery)：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 获取所有的选项卡链接
  var tabLinks = $('#tab-list a');

  // 为每个链接添加点击事件处理函数
  tabLinks.on('click', function(e) {
    e.preventDefault(); // 阻止默认的页面跳转

    // 获取当前链接的id
    var currentTabId = $(this).attr('href');

    // 隐藏所有内容
    $('.tab-panel').hide();

    // 显示点击链接对应的内容
    $('#' + currentTabId).show();

    // 使当前链接变为激活状态
    $(this).parent().addClass('active').siblings().removeClass('active');
  });
});
</script>

3. CSS样式（用于美化）：

.tabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.tabs li {
  margin-right: 10px;
}

.tabs a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

.tab-panel {
  display: none;
  padding: 10px;
}

.active {
  background-color: #f1f1f1;
}
</style>