简单选项卡 js和jquery制作方法分享

当然，我可以为你分享一个使用纯JavaScript和jQuery来制作简单选项卡（Tabs）的方法。这里，我将提供一个基本的示例，展示如何创建一个包含几个选项卡的界面，用户可以通过点击不同的选项卡来显示对应的内容。

### HTML 结构

首先，我们需要创建HTML结构，包括选项卡头部（tabs）和选项卡内容（tab contents）。

<div class="tabs">
  <ul class="tab-links">
    <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 class="tab-content">
    <div id="tab1" class="tab active">
      <p>这是Tab 1的内容。</p>
    </div>
    <div id="tab2" class="tab">
      <p>这是Tab 2的内容。</p>
    </div>
    <div id="tab3" class="tab">
      <p>这是Tab 3的内容。</p>
    </div>
  </div>
</div>

### CSS 样式

接下来，添加一些基本的CSS来美化选项卡。

.tabs {
  width: 100%;
  float: none;
  list-style: none;
  position: relative;
  margin: 20px auto;
  padding: 0;
}

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}

.tab-links li {
  margin: 0px 5px;
  float: left;
  list-style: none;
}

.tab-links a {
  padding: 9px 15px;
  display: inline-block;
  border-radius: 3px 3px 0px 0px;
  background: #7FB5DA;
  font-size: 16px;
  font-weight: 600;
  color: #4c4c4c;
  transition: all linear 0.15s;
}

.tab-links a:hover {
  background: #a7cce5;
  text-decoration: none;
}

.tab-content {
  padding: 15px;
  border-radius: 3px;
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
  background: #fff;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

### JavaScript/jQuery 逻辑

最后，使用jQuery来添加交互逻辑，使得点击选项卡头部时能够显示对应的内容。

$(document).ready(function(){
  $('.tab-links a').on('click', function(e)  {
    var currentAttrValue = $(this).attr('href');

    // 移除所有选项卡内容的active类
    $('.tab').removeClass('active');

    // 移除所有选项卡链接的active类
    $('.tab-links li').removeClass('active');

    // 添加当前选项卡链接的active类
    $(this).parent('li').addClass('active');

    // 显示当前选项卡内容
    $(currentAttrValue).addClass('active');

    e.preventDefault();
  });
});

这个示例展示了如何使用HTML、CSS和jQuery来创建一个简单的选项卡界面。你可以根据自己的需求调整样式和功能。