jquery划过选项卡显示对应的选项

可以使用以下代码实现：

HTML代码：

<div class="tab">
  <ul class="tab-menu">
    <li class="active"><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">
    <div id="tab1" class="tab-pane active">选项卡1内容</div>
    <div id="tab2" class="tab-pane">选项卡2内容</div>
    <div id="tab3" class="tab-pane">选项卡3内容</div>
  </div>
</div>

CSS代码：

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

.tab-menu li {
  display: inline-block;
  margin-right: 20px;
}

.tab-menu li a {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-bottom: none;
  text-decoration: none;
  color: #333;
}

.tab-menu li.active a {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}

.tab-content .tab-pane {
  display: none;
}

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

jQuery代码：

$('.tab-menu li a').hover(function() {
  var tab_id = $(this).attr('href');
  $('.tab-menu li').removeClass('active');
  $(this).parent().addClass('active');
  $('.tab-content .tab-pane').removeClass('active');
  $(tab_id).addClass('active');
});

当鼠标悬停在选项卡上时，通过jQuery代码动态添加/删除类来控制显示对应的选项卡内容。