左右箭头点击实现一行超出可视区域的tab切换

最新推荐文章于 2023-04-23 10:14:31 发布
最新推荐文章于 2023-04-23 10:14:31 发布
阅读量5.5k 收藏 16
点赞数 1
分类专栏： js 文章标签： tab切换 tab滚动切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yufengaotian/article/details/84552778
版权

tab切换是网页布局中很常用的一个设计，如果我们的选项卡有很多个，一行显示不下，就需要把剩余的部分先隐藏，点击触发显示切换。如下图：

 具体代码实现如下：

默认显示第一个（下标是0），可视区域7个选项卡。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>荣誉历程</title>
		<link rel="shortcut icon" href="img/favicon.ico">
		<style>
            .wrap{
              width:1200px;
              margin:0 auto;
            }
			.tab {
				position: relative;
				margin-top: 50px;
				padding-top: 15px;
				overflow: hidden;
			}
			.tab .layui-icon {
				position: absolute;
				top: -0px;
				z-index: 10;
				width: 30px;
				height: 30px;
				line-height: 30px;
				background-color: #fff;
				color: #C0C0C0;
				border-radius: 50%;
				text-align: center;
				border: 1px solid #C0C0C0;
				font-weight: 700;
				cursor: pointer;
			}
			.tab .layui-icon:hover{
				color: #FFFFFF;
				background: #76B729;
			}
			.tab .layui-icon-left {
				left: 0px;
			}
			
			.tab .layui-icon-right {
				right: 0px;
			}
			
			.tab .tablist {
				border-top: 1px solid #C0C0C0;
				width: 4000px;
				padding-left:20px;
				position: relative;
				left: 0;
				top: 0;
			}
			
			.tab .tablist li {
				display: inline-block;
				float: left;
				width: 150px;
				padding-top: 25px;
				text-align: center;
				font-size: 16px;
				font-weight: 600;
				cursor: pointer;
				background: url(../img/bg01.png) no-repeat 70px -5px;
				background-size: 12px 12px;
				z-index: 5;
				margin-top: -4px;
			}
			
			.tab .tablist .on {
				color: #76B729;
				background: url(../img/bg02.png) no-repeat 68px -8px;
				background-size: 15px 25px;
			}
			
			.tabContent {
				margin-top: 50px;
			}
			
			.tbox {
				display: none;
				background: #F7F7F7;
				height: 480px;
			}
			
			.active {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="mainBox">
			<div class="wrap">
				<div class="honor">
					<!--标题时间-->
					<h1 class="textCenter">荣誉历程</h1>
					<!--顶部标签-->
					<div class="tab">
						<span class="layui-icon layui-icon-left"></span>
						<span class="layui-icon layui-icon-right"></span>
						<ul class="tablist clearfix">
							<li class="tabItem on">2018</li>
							<li class="tabItem">2017</li>
							<li class="tabItem">2016</li>
							<li class="tabItem">2015</li>
							<li class="tabItem">2014</li>
							<li class="tabItem">2013</li>
							<li class="tabItem">2012</li>
							<li class="tabItem">2011</li>
							<li class="tabItem">2010</li>
							<li class="tabItem">2009</li>
							<li class="tabItem">2008</li>
							<li class="tabItem">2007</li>
						</ul>
					</div>
					<!--底部内容-->
					<div class="tabContent">
						<div class="tbox active">第1页</div>
						<div class="tbox">第2页</div>
						<div class="tbox">第3页</div>
						<div class="tbox">第4页</div>
						<div class="tbox">第5页</div>
						<div class="tbox">第6页</div>
						<div class="tbox">第7页</div>
						<div class="tbox">第8页</div>
						<div class="tbox">第9页</div>
						<div class="tbox">第10页</div>
						<div class="tbox">第11页</div>
						<div class="tbox">第12页</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../lib/jquery-1.12.2.js"></script>
	<script>
		$(function(){
			//当前选中下标，默认是第一个,视图区域只有7个可见模块
			var defartIndex = 0;
			// ul移动距离居左
			var ulNum = 0;
			// 看有多少模块
			var tabItemArr = $(".tablist").find(".tabItem");
			console.log(tabItemArr.length);
			// 左边箭头
			$(".layui-icon-right").click(function(){
				if(defartIndex >= tabItemArr.length - 1){
					alert("没有更多了！")
				}else if(defartIndex >= tabItemArr.length - 7 && defartIndex< tabItemArr.length -1){
					defartIndex++;
					ulNum = ulNum -150;
					// 当剩余最后7个的话
					var fixLeft = -150*(tabItemArr.length - 7);
					$(".tablist").animate({left:fixLeft},300);
					//顶部添加样式
					$(".tab .tabItem").eq(defartIndex).addClass("on").siblings().removeClass("on");
					//底部添加样式
					$(".tabContent .tbox").eq(defartIndex).addClass("active").siblings().removeClass("active");
				}else{
					defartIndex++;
					ulNum = ulNum -150;
					//往左移动距离
					$(".tablist").animate({left:ulNum},300);
					//顶部添加样式
					$(".tab .tabItem").eq(defartIndex).addClass("on").siblings().removeClass("on");
					//底部添加样式
					$(".tabContent .tbox").eq(defartIndex).addClass("active").siblings().removeClass("active");
				}
				console.log("defartIndex="+defartIndex);
			});
			// 右边箭头
			$(".layui-icon-left").click(function(){
				if(defartIndex<1){
					alert("没有最新得了")
				}else if(defartIndex > tabItemArr.length - 6 && defartIndex <= tabItemArr.length -1){
					defartIndex--;
					ulNum = ulNum + 150;
					// 当剩余最后7个的话
					var fixLeft = -150*(tabItemArr.length - 7);
					$(".tablist").animate({left:fixLeft},300);
					//顶部添加样式
					$(".tab .tabItem").eq(defartIndex).addClass("on").siblings().removeClass("on");
					//底部添加样式
					$(".tabContent .tbox").eq(defartIndex).addClass("active").siblings().removeClass("active");
				}else{
					defartIndex--;
					ulNum = ulNum + 150;
					//往左移动距离
					$(".tablist").animate({left:ulNum},300);
					//顶部添加样式
					$(".tab .tabItem").eq(defartIndex).addClass("on").siblings().removeClass("on");
					//底部添加样式
					$(".tabContent .tbox").eq(defartIndex).addClass("active").siblings().removeClass("active");
				}
				console.log("defartIndex="+defartIndex);
			});
		});
	</script>
</html>

 

御风傲天
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css图片滑动切换图_前端开发之使用纯CSS实现炫酷Tab切换
weixin_39532699的博客
11-22 634
效果展示选中样式制作将每个 tab 设置固定宽度。每个tab 添加相对定位，居中，行高添加伪类，伪类设置绝对定位，在底部。设置伪类的宽度为 0%(伪类会继承该元素的宽度)设置选中时候的伪类宽度为50%(视情况而定)给元素添加过渡样式HTML代码(wxml){{item.name}}CSS(less)：.nav-bar{position: relative;z-index: 10;height: 9...
tab切换，左右加箭头，点击箭头实现tab切换
最新发布
凡尘
09-08 362
tab切换，左右加箭头，点击箭头实现tab切换
前台tab左右箭头移动界面
weixin_44630850的博客
03-21 1116
前台tab左右箭头移动界面 Tab - Layui <div class="layui-body"> <!-- 内容主体区域 --> <div class="layadmin-pagetabs" style="position: relative;margin: 0px;paddin...
tab选项卡前后有向前和向后按钮，点击实现上一个下一个
weixin_33850890的博客
05-06 844
实现功能：（选项卡）选项卡前后有一个向前、向后的点击功能，点左边...
【vue】自定义tab点击左右箭头可切换
l_XIANA的博客
04-23 2078
tab走马灯左右箭头点击切换
【前端面试题】Vue自定义指令——实现tab的切换
Dai的博客
02-09 1111
【前端面试题】Vue自定义指令——实现tab的切换
左右移动tab页面切换效果
04-03
这是可以实现了左右移动tab页面切换效果，源码Tab Carousel，实现特殊效果的tab界面，左右移动tab的时候，页面的切换会有淡入淡出的效果，除了可以左右切换tab之外，每个tab还可以上下滑动，也就是所谓的 Panels 或者 Multi-pane Layouts。 A back-port of the carousel widget found in the ICS People app.
vue实现拖拽的简单案例 不超出可视区域
10-16
主要为大家详细介绍了vue实现拖拽的简单案例，不超出可视区域，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序滚动Tab实现左右可滑动切换
12-10
在微信小程序中，实现滚动Tab左右可滑动切换的效果，主要涉及到`scroll-view`和`swiper`两个组件的使用。以下是对这个实现过程的详细解释： 1. **使用`scroll-view`组件**： - `scroll-view`是微信小程序中的一个...
纯css实现的tab切换效果(使用锚点作为标记)
09-25
在本文中，我们将探讨如何使用纯CSS实现一个基于锚点的tab切换效果。通常，我们可能会认为这样的交互式效果需要JavaScript来实现，但实际上，利用HTML锚点和CSS选择器，我们可以创建一个简单而有效的tab切换系统。 ...
带左右箭头点击切换的无缝滚动效果
04-13
现在网络上常用的焦点图带箭头点击切换，无缝滚动
左右按钮tab选项卡双切换特效代码
03-20
左右按钮tab选项卡双切换是一款带有左右按钮跟tab选项卡双重切换的jQuery滑动焦点图代码。
vue滚动tab跟随切换效果
10-16
在Vue.js中实现滚动tab跟随切换效果是一种常见的增强用户体验的交互设计，特别是在移动应用或响应式网站中。这种效果使得用户在浏览长页面时能够轻松地切换不同内容区域。以下将详细讲解如何在Vue中创建这个功能。 ...
vue 里实现文本超出时点击左右按钮滚动？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
08-06 3425
实现 编写 leftRightSwiperScroll.vue 组件。 <template> <!-- 文本超出，左右按钮滚动 --> <div ref="swiperScroll" class="left-right-swiper-scroll-box"> <!-- 左边按钮 --> <div v-show="showLeftIcon" @click="handleLeftClick" class="scroll-icon left-icon"
tab页过多，展现按钮可左右移动tab页
lixiaonaaa的博客
04-22 1761
1，结果如下图，tab太多，一行放不下，右侧展现左右按钮，鼠标移上tab页可左右移动 2，代码 /** * 功能按钮过多时，可左右移动 * @param {*} id 按钮区域id * @param {*} dom 按钮元素 * @param {*} btnclass 按钮样式 * @param {*} mp 每个按钮需要增加的宽度 * @param {*} n 隐藏按钮增加的个数 */ function btnShowOrHide(id, dom, btnclass='', m.
layui左右移动tab标签模版
weixin_30299539的博客
06-30 3455
{% load staticfiles %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scal...
打开多tab出现左右滑动按钮
liushuiziyouliu的专栏
11-21 2502
当打开多个tab时，出现左右滑动按钮，并可以左右滑动tab。 html代码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www....
前端tab栏切换/选项卡的实现（JS原生+jQuery两种方法实现）
IlPoppylI的博客
03-03 3049
前端tab栏切换/选项卡的实现(JS/DOM)源码+示例
前端——tab 栏切换案例
weixin_45166755的博客
06-11 1806
Tab 栏切换
点击左右箭头左右滑动效果
06-01
这可以通过JavaScript和CSS实现。首先，需要在HTML中创建一个具有滑动效果的容器，例如一个div元素，并为其添加CSS样式，使其可以滑动。然后，使用JavaScript监听用户的滑动手势事件，并根据用户的滑动方向来移动容器的位置。 以下是一个示例代码，实现左右滑动效果： HTML代码： ``` <div class="slider"> <div class="slides"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> </div> ``` CSS代码： ``` .slider { width: 100%; overflow: hidden; } .slides { display: flex; width: 300%; } .slides img { width: 33.33%; float: left; } ``` JavaScript代码： ``` var slider = document.querySelector('.slider'); var slides = document.querySelector('.slides'); var slideIndex = 0; // 监听用户的滑动手势事件 slider.addEventListener('touchstart', handleTouchStart, false); slider.addEventListener('touchmove', handleTouchMove, false); var x1 = null; var y1 = null; // 处理滑动手势开始事件 function handleTouchStart(event) { x1 = event.touches[0].clientX; y1 = event.touches[0].clientY; } // 处理滑动手势移动事件 function handleTouchMove(event) { if (!x1 || !y1) { return; } var x2 = event.touches[0].clientX; var y2 = event.touches[0].clientY; var xDiff = x2 - x1; var yDiff = y2 - y1; if (Math.abs(xDiff) > Math.abs(yDiff)) { // 水平滑动 event.preventDefault(); if (xDiff > 0) { // 向右滑动 slideIndex--; if (slideIndex < 0) { slideIndex = slides.children.length - 1; } } else { // 向左滑动 slideIndex++; if (slideIndex >= slides.children.length) { slideIndex = 0; } } slides.style.transform = 'translateX(-' + slideIndex * 100 / slides.children.length + '%)'; } x1 = null; y1 = null; } ``` 这段代码中，我们使用了CSS的flex布局来创建一个具有滑动效果的容器，其中图片元素的宽度设为33.33%。然后，我们监听了滑动手势事件，并根据用户的滑动方向来移动容器的位置，从而实现了左右滑动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值