jquery 实现简单的标签页效果

以下是一个使用jQuery实现简单标签页效果的示例代码：

HTML部分：

<div id="tabs">
  <ul>
    <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 id="tab1">内容1</div>
  <div id="tab2" style="display:none;">内容2</div>
  <div id="tab3" style="display:none;">内容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 a.active { background-color: #ddd; }

jQuery部分：

$(document).ready(function() {
  $('#tabs ul li a').click(function() {
    $('#tabs ul li a').removeClass('active');
    $(this).addClass('active');
 
    var content_id = $(this).attr("href");
    $(content_id).siblings().hide();
    $(content_id).show();
    return false;
  });
});

这段代码实现了基本的标签页效果，点击不同的链接会显示对应的内容区域，同时更新当前激活的标签样式。