jquery实现点击tab,对应的html页面展示在index页面中

如果你想在点击tab时，将对应的HTML页面展示在index页面中，可以使用jQuery的Ajax方法来实现。

以下是一个示例代码：

HTML代码部分：

<div class="tab-container">
  <ul class="tab-nav">
    <li data-url="page1.html">Tab 1</li>
    <li data-url="page2.html">Tab 2</li>
    <li data-url="page3.html">Tab 3</li>
  </ul>
  <div class="tab-content"></div>
</div>

CSS代码部分：

.tab-nav li {
  display: inline-block;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

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

JavaScript代码部分：

$(function() {
  $('.tab-nav li').click(function() {
    var url = $(this).data('url'); // 获取当前点击的tab对应的HTML页面的URL
    $(this).addClass('active').siblings().removeClass('active'); // 切换选中tab的样式
    
    // 发送Ajax请求，获取对应的HTML页面内容
    $.ajax({
      url: url,
      type: 'GET',
      dataType: 'html',
      success: function(data) {
        $('.tab-content').html(data); // 将HTML页面内容展示在tab-content中
      }
    });
  });
});

以上代码中，我们给每个tab添加了一个data-url属性，用来存储对应的HTML页面的URL。当点击tab时，我们使用jQuery的Ajax方法发送GET请求，获取对应的HTML页面内容，并将其展示在tab-content中。

需要注意的是，由于Ajax请求是异步的，所以在获取到HTML页面内容前，tab-content中会显示loading状态，这可以通过添加 loading 动画或遮罩层来优化用户体验。