用jq写一个切换选项页

以下是使用 jQuery（简称 jq）编写的一个简单的选项卡切换示例：

HTML 代码：

<div class="tab-container">
  <ul class="tab-nav">
    <li><a href="#tab1">选项卡1</a></li>
    <li><a href="#tab2">选项卡2</a></li>
    <li><a href="#tab3">选项卡3</a></li>
  </ul>
  <div class="tab-content" id="tab1">
    <h2>选项卡1</h2>
    <p>这是选项卡1的内容。</p>
  </div>
  <div class="tab-content" id="tab2">
    <h2>选项卡2</h2>
    <p>这是选项卡2的内容。</p>
  </div>
  <div class="tab-content" id="tab3">
    <h2>选项卡3</h2>
    <p>这是选项卡3的内容。</p>
  </div>
</div>

CSS 代码：

.tab-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab-nav li {
  display: inline-block;
  margin-right: 10px;
}

.tab-nav li a {
  display: block;
  padding: 5px 10px;
  background-color: #eee;
  text-decoration: none;
  color: #333;
}

.tab-nav li.active a {
  background-color: #ccc;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

jQuery 代码：

$(function() {
  // 选项卡切换
  $('.tab-nav li').on('click', function() {
    var $this = $(this),
        tabId = $this.find('a').attr('href');
    
    // 显示当前选项卡
    $this.addClass('active').siblings().removeClass('active');
    $(tabId).addClass('active').siblings().removeClass('active');
    
    return false;
  });
});

解释：

$()是 jQuery 函数，用于获取页面上的元素。其中，$(function() { ... })是一种简写方式，表示当页面完全加载完成后执行函数里面的代码。
.tab-nav li 是选择器，用于选择页面上的选项卡导航项。
.on('click', function() { ... }) 是事件绑定函数，表示当用户点击选项卡导航项时执行函数里面的代码。
$(this) 表示当前被点击的选项卡导航项。
$this.find('a').attr('href') 表示获取当前选项卡导航项的 href 属性值，即选项卡的 ID。
.addClass('active') 表示给当前元素添加一个名为 active 的 CSS 类。
.siblings() 表示当前元素的兄弟元素。
.removeClass('active') 表示移除当前元素的名为 active 的 CSS 类。
return false; 表示阻止浏览器默认行为，即不跳转到选项卡的链接地址。