利用jQuery做tab栏高亮切换

以下是一个使用jQuery实现的简单的Tab栏高亮切换的示例代码：

HTML部分：

<div id="tabs">
  <ul>
    <li class="active"><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="tab1">Content for tab 1</div>
  <div id="tab2" style="display:none;">Content for tab 2</div>
  <div id="tab3" style="display:none;">Content for tab 3</div>
</div>

CSS部分：

#tabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
#tabs ul li {
  float: left;
  margin-right: 10px;
}
 
#tabs ul li a {
  padding: 5px 10px;
  display: block;
}
 
#tabs ul li.active a {
  background-color: #ddd;
}
 
#tabs div {
  clear: both;
  padding: 10px;
  display: none;
}
 
#tabs div.active {
  display: block;
}

jQuery部分：

$(document).ready(function() {
  $('#tabs ul li a').click(function() {
    var tab_id = $(this).attr('href');
 
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
 
    $('#tabs div').removeClass('active');
    $(tab_id).addClass('active');
 
    return false;
  });
});

这段代码实现了基本的Tab栏切换功能，点击不同的链接会高亮显示对应的标签并显示对应的内容区域。