带swiper的选项卡联动切换

最新推荐文章于 2023-11-10 17:35:05 发布

QSWQSWQSWQSWQSW

最新推荐文章于 2023-11-10 17:35:05 发布

阅读量1.7k

点赞数

分类专栏： css html js 文章标签：带swiper的选项卡联动切换

本文链接：https://blog.csdn.net/qq_43209114/article/details/107670809

版权

js 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

html

41 篇文章 1 订阅

订阅专栏

css

36 篇文章 1 订阅

订阅专栏

HTML

<!DOCTYPE html >!
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" href="css/lanrenzhijia.css">
		<style type="text/css">
			.tabs {
				width: 100%;
				overflow-x: scroll;
				display: -webkit-box;
				display: flex;
				-webkit-flex-wrap: nowrap;
				flex-wrap: nowrap;
				-webkit-justify-content: space-between;
				justify-content: space-between;
			}

			.tab a {
				padding: 0 10px;
				text-align: center;
				-webkit-flex: 1 0 auto;
				flex: 1 0 auto;
			}
			.wrap{
				margin-top: 0;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="tabs">
				<a href="#" hidefocus="true" class="active">手机端</a>
				<a href="#" hidefocus="true">选项卡</a>
				<a href="#" hidefocus="true">切换效果</a>
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="content-slide">
							tab内容一
						</div>
					</div>
					<div class="swiper-slide">
						<div class="content-slide">
							tab内容二
						</div>
					</div>
					<div class="swiper-slide">
						<div class="content-slide">
							tab内容三
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="http://www.lanrenzhijia.com/ajaxjs/jquery-1.10.1.min.js"></script>
		<script src="http://www.lanrenzhijia.com/ajaxjs/idangerous.swiper.min.js"></script>
		<script>
			var tabsSwiper = new Swiper('.swiper-container', {
				speed: 500,
				onSlideChangeStart: function() {
					$(".tabs .active").removeClass('active');
					$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
				}
			});

			$(".tabs a").on('touchstart mousedown', function(e) {
				e.preventDefault()
				$(".tabs .active").removeClass('active');
				$(this).addClass('active');
				tabsSwiper.swipeTo($(this).index());
			});

			$(".tabs a").click(function(e) {
				e.preventDefault();
			});
		</script>
	</body>
</html>

CSS

body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;}
.wrap{margin:100px auto 0 auto;}
.tabs{height:40px;}
.tabs a{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:40px;font-size:16px;text-decoration:none;}
.tabs a.active{color:#fff;background:#333;border-radius:5px 5px 0px 0px;}
.swiper-container{background:#333;height:325px;border-radius:0 0 5px 5px;width:100%;border-top:0;}
.swiper-slide{height:325px;width:100%;background:none;color:#fff;}
.content-slide{padding:40px;}
.content-slide p{text-indent:2em;line-height:1.9;}
.swiper-container {margin:0 auto;position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;/* Fix of Webkit flickering */	z-index:1;}
.swiper-wrapper {position:relative;width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}