jquery实现同时展示多个tab标签+左右箭头实现来回滚动,使用float。完整代码
时间: 2023-12-29 16:03:35 浏览: 50
以下是使用 jQuery 实现同时展示多个 tab 标签,并且使用左右箭头实现来回滚动的完整代码,其中使用了 float 属性:
HTML 代码:
```html
<div class="tab-container">
<div class="tab-scroll">
<div class="tab-wrap">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab">Tab 4</div>
<div class="tab">Tab 5</div>
<div class="tab">Tab 6</div>
<div class="tab">Tab 7</div>
<div class="tab">Tab 8</div>
<div class="tab">Tab 9</div>
<div class="tab">Tab 10</div>
</div>
</div>
<div class="tab-prev"><</div>
<div class="tab-next">></div>
</div>
```
CSS 代码:
```css
.tab-container {
position: relative;
overflow: hidden;
}
.tab-scroll {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.tab-wrap {
display: inline-block;
}
.tab {
display: inline-block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ccc;
margin-right: 10px;
float: left;
}
.tab-prev,
.tab-next {
position: absolute;
top: 0;
bottom: 0;
width: 50px;
line-height: 50px;
text-align: center;
background-color: #f00;
color: #fff;
cursor: pointer;
}
.tab-prev {
left: 0;
}
.tab-next {
right: 0;
}
```
jQuery 代码:
```javascript
$(function() {
var $tabWrap = $('.tab-wrap');
var $tabPrev = $('.tab-prev');
var $tabNext = $('.tab-next');
var tabWidth = $tabWrap.outerWidth();
var tabWrapWidth = $tabWrap[0].scrollWidth;
var tabScrollWidth = tabWrapWidth - tabWidth;
var tabOffsetLeft = $tabWrap.offset().left;
var tabOffsetRight = $(window).width() - tabOffsetLeft - tabWidth;
var isScrollingLeft = false;
var isScrollingRight = false;
$tabPrev.on('mousedown', function() {
isScrollingLeft = true;
scrollLeft();
});
$tabNext.on('mousedown', function() {
isScrollingRight = true;
scrollRight();
});
$(document).on('mouseup', function() {
isScrollingLeft = false;
isScrollingRight = false;
});
function scrollLeft() {
if (isScrollingLeft) {
$tabWrap.scrollLeft($tabWrap.scrollLeft() - 10);
setTimeout(scrollLeft, 10);
}
}
function scrollRight() {
if (isScrollingRight) {
$tabWrap.scrollLeft($tabWrap.scrollLeft() + 10);
setTimeout(scrollRight, 10);
}
}
$tabWrap.on('scroll', function() {
var tabScrollLeft = $tabWrap.scrollLeft();
if (tabScrollLeft <= 0) {
$tabPrev.hide();
} else {
$tabPrev.show();
}
if (tabScrollLeft >= tabScrollWidth) {
$tabNext.hide();
} else {
$tabNext.show();
}
});
});
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)