jquery实现同时展示多个tab标签+左右箭头实现来回滚动。完整代码
时间: 2023-12-16 19:04:02 浏览: 61
好的,以下是一个基于jQuery实现同时展示多个tab标签和左右箭头滚动的示例代码:
HTML部分:
```html
<div class="tab-wrapper">
<div class="tab-scroll left-arrow"><i class="fa fa-chevron-left"></i></div>
<div class="tab-container">
<ul class="tabs">
<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>
</ul>
</div>
<div class="tab-scroll right-arrow"><i class="fa fa-chevron-right"></i></div>
</div>
```
CSS部分:
```css
.tab-wrapper {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 0 auto;
max-width: 800px;
}
.tab-scroll {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.8);
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s ease;
}
.tab-scroll:hover {
opacity: 1;
}
.left-arrow {
left: 0;
}
.right-arrow {
right: 0;
}
.tab-container {
flex: 1;
overflow: hidden;
padding: 0 50px;
}
.tabs {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.tabs li {
margin-right: 20px;
}
.tabs li:last-child {
margin-right: 0;
}
.tabs a {
display: block;
padding: 10px;
border: 1px solid #ccc;
border-bottom: none;
background-color: #f9f9f9;
color: #333;
text-decoration: none;
}
.tabs a:hover {
background-color: #e5e5e5;
}
.tabs .active a {
border-color: #ccc;
border-bottom: none;
background-color: #fff;
font-weight: bold;
}
```
JavaScript部分:
```javascript
$(document).ready(function() {
// 将tab标签容器和tab标签项存储为变量
var tabContainer = $('.tab-container');
var tabs = $('.tabs li');
// 获取每个tab标签项的宽度
var tabWidth = tabs.outerWidth();
// 计算tab标签容器的总宽度
var totalWidth = tabWidth * tabs.length;
// 将tab标签容器的总宽度设置为tab标签容器的宽度
tabContainer.css('width', totalWidth + 'px');
// 点击左箭头向左滚动tab标签
$('.left-arrow').click(function() {
var scrollLeft = tabContainer.scrollLeft();
tabContainer.animate({scrollLeft: scrollLeft - tabWidth}, 200);
});
// 点击右箭头向右滚动tab标签
$('.right-arrow').click(function() {
var scrollLeft = tabContainer.scrollLeft();
tabContainer.animate({scrollLeft: scrollLeft + tabWidth}, 200);
});
// 点击tab标签切换内容
tabs.click(function() {
var tab = $(this);
var target = $(tab.find('a').attr('href'));
// 移除所有tab标签项的active类
tabs.removeClass('active');
// 添加当前点击的tab标签项的active类
tab.addClass('active');
// 隐藏所有内容
$('.tab-content').hide();
// 显示目标内容
target.show();
});
// 初始化第一个tab标签为active类
tabs.first().addClass('active');
// 显示第一个内容
$('#tab1').show();
});
```
这个示例代码中,我们首先将所有的tab标签项放在一个容器中,并将这个容器的宽度设置为所有tab标签项的宽度之和,这样就可以实现同时展示多个tab标签。然后,我们使用jQuery的scrollLeft()方法和animate()方法实现左右箭头的滚动效果。最后,我们使用jQuery的click()方法和addClass()方法、removeClass()方法和show()方法实现tab标签切换内容的效果。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)