基于swiper的tab选项卡

发布时间:2020-06-26 15:07:21 作者:歆冉
来源:网络 阅读:2491
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.container{
				position: relative;
				width: 600px;
				height: 300px;
				border: 1px solid red;
				margin:100px auto;
			}
						
			.tabs {
				position: absolute;
				left: 0;
				bottom: 0;
				height: 50px;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.5);
			}
			
			.tabs button {
				width: 80px;
				height: 30px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="tabs">
				<button>1</button>
				<button>2</button>
				<button>3</button>
			</div>
			<div class="box swiper-container">
				<div class="content swiper-wrapper">
					<div class="swiper-slide">1</div>
					<div class="swiper-slide">2</div>
					<div class="swiper-slide">3</div>
				</div>
			</div>

		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var mySwiper = new Swiper('.swiper-container');

		$('.tabs button').on('click', function(e) {
			e.preventDefault();
			// 获取当前索引
			var index = $(this).index();
			mySwiper.slideTo(index, 1000, false);
		});
	</script>
</html>

效果:

基于swiper的tab选项卡


推荐阅读:
  1. 利用jQuery实现Tab选项卡
  2. Jquery封装tab选项卡

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

swiper tab选项卡

上一篇:Win平台MySQL安装配置与小型项目_MySQL数据库入门与项目实战02

下一篇:如何解决AUTOCAD启动后报停止工作不能正常使用?

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》