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 { display: inline-block; }
#tabs ul li a { padding: 5px; margin-right: 5px; border: 1px solid #ccc; }
#tabs ul li a.active, #tabs ul li a:hover { border-bottom: none; }

jQuery部分：

$(document).ready(function() {
  $('#tabs ul li a').click(function() {
    $('#tabs ul li a').removeClass('active'); // 移除所有tab的active类
    $(this).addClass('active'); // 为当前点击的tab添加active类
    var content_id = $(this).attr("href"); // 获取href属性值（即对应的内容区域ID）
    // 隐藏所有的内容区域，然后显示当前点击的内容区域
    $('#tabs ' + content_id).siblings().hide();
    $(content_id).show();
    return false; // 阻止默认的链接跳转行为
  });
  $('#tabs ul li a:first').click(); // 默认点击第一个tab
});

这段代码实现了基本的Tab切换功能，用户点击不同的链接，就会显示对应的内容区域，同时将其他区域隐藏。通过添加和移除CSS类，还可以实现不同的视觉效果。