jquery实现同时展示多个tab标签+左右箭头实现左右来回滚动,使用float。完整代码

好的，这里是一个基于 jQuery 实现同时展示多个 tab 标签以及左右箭头来回滚动的示例代码：

HTML 结构：

<div class="tabs-container">
  <div class="tabs-wrapper">
    <ul class="tabs-nav">
      <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>
      <li><a href="#tab4">Tab 4</a></li>
      <li><a href="#tab5">Tab 5</a></li>
      <li><a href="#tab6">Tab 6</a></li>
      <li><a href="#tab7">Tab 7</a></li>
      <li><a href="#tab8">Tab 8</a></li>
      <li><a href="#tab9">Tab 9</a></li>
      <li><a href="#tab10">Tab 10</a></li>
    </ul>
  </div>
  <a href="#" class="tabs-arrow tabs-arrow-left">&lt;</a>
  <a href="#" class="tabs-arrow tabs-arrow-right">&gt;</a>
</div>

<div id="tab1" class="tab-content active">Tab 1 Content</div>
<div id="tab2" class="tab-content">Tab 2 Content</div>
<div id="tab3" class="tab-content">Tab 3 Content</div>
<div id="tab4" class="tab-content">Tab 4 Content</div>
<div id="tab5" class="tab-content">Tab 5 Content</div>
<div id="tab6" class="tab-content">Tab 6 Content</div>
<div id="tab7" class="tab-content">Tab 7 Content</div>
<div id="tab8" class="tab-content">Tab 8 Content</div>
<div id="tab9" class="tab-content">Tab 9 Content</div>
<div id="tab10" class="tab-content">Tab 10 Content</div>

CSS 样式：

.tabs-container {
  position: relative;
  overflow: hidden;
}
.tabs-wrapper {
  white-space: nowrap;
  font-size: 0;
}
.tabs-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.tabs-nav li {
  display: inline-block;
}
.tabs-nav li a {
  display: inline-block;
  padding: 10px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
}
.tabs-nav li.active a {
  background-color: #333;
  color: #fff;
}
.tab-content {
  display: none;
  padding: 20px;
  background-color: #fff;
}
.tab-content.active {
  display: block;
}
.tabs-arrow {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  background-color: #eee;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  color: #333;
  text-decoration: none;
  z-index: 1;
}
.tabs-arrow-left {
  left: 0;
}
.tabs-arrow-right {
  right: 0;
}

JavaScript 代码：

$(function() {
  // 获取元素
  var $tabsWrapper = $('.tabs-wrapper');
  var $tabsNav = $('.tabs-nav');
  var $tabsArrowLeft = $('.tabs-arrow-left');
  var $tabsArrowRight = $('.tabs-arrow-right');
  var $tabContents = $('.tab-content');

  // 计算每个标签的宽度
  var tabWidth = $tabsNav.width() / $tabsNav.children().length;

  // 设置每个标签的宽度
  $tabsNav.children().css('width', tabWidth);

  // 设置初始活动标签
  $tabsNav.children().eq(0).addClass('active');
  $tabContents.eq(0).addClass('active');

  // 点击标签切换内容
  $tabsNav.on('click', 'a', function(e) {
    e.preventDefault();
    var $this = $(this);
    var target = $this.attr('href');
    $tabsNav.children().removeClass('active');
    $this.parent().addClass('active');
    $tabContents.removeClass('active');
    $(target).addClass('active');
  });

  // 点击箭头左右滚动标签
  $tabsArrowLeft.on('click', function(e) {
    e.preventDefault();
    $tabsWrapper.animate({ scrollLeft: '-=' + tabWidth }, 500);
  });
  $tabsArrowRight.on('click', function(e) {
    e.preventDefault();
    $tabsWrapper.animate({ scrollLeft: '+=' + tabWidth }, 500);
  });
});

注意事项：

- 使用 `position: relative` 和 `overflow: hidden` 来限制容器的大小以及隐藏溢出部分。
- 使用 `white-space: nowrap` 来让所有标签水平排列在一行上。
- 使用 `font-size: 0` 将标签之间的空白符号去掉，避免出现间隙。
- 使用 JavaScript 计算每个标签的宽度，并设置每个标签的宽度。
- 使用 `scrollLeft` 属性来控制标签容器的滚动位置。
- 在滚动时使用动画效果 `animate` 来让滚动更加平滑。