三、idangerous.swiper实现点击tab切换
实现 切换 点击 tab swiper
2023-09-11 14:19:17 时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/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;}
</style>
<link rel="stylesheet" href="css/idangerous.swiper.css">
</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">
<h2>AAAAAAAAAAAAAAAAAAAAA</h2>
<p>AAAAAAAAAAAAAAAAAAAAA</p>
<p>AAAAAAAAAAAAAAAAAAAAA</p>
<p>AAAAAAAAAAAAAAAAAAAAA</p>
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
<h2>BBBBBBBBBBBBBBBBBB</h2>
<p>BBBBBBBBBBBBBBBBBB</p>
<p>BBBBBBBBBBBBBBBBBB</p>
<p>BBBBBBBBBBBBBBBBBB</p>
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
<h2>CCCCCCCCCCCCCCCCCCCCCCCC</h2>
<p>CCCCCCCCCCCCCCCCCCCCCCCC</p>
<p>CCCCCCCCCCCCCCCCCCCCCCCC</p>
<p>CCCCCCCCCCCCCCCCCCCCCCCC</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.min.js"></script>
<script type="text/javascript">
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>
相关文章
- PHP实现redis订阅发布
- Mac 下安装jdk1.7和jdk1.8并实现任意版本自动切换
- RISCV用户态系统调用层的封装实现
- C#【必备技能篇】Winform实现多语言切换(.resx文件的应用)
- [转]echarts tree (树图) 实现自定义节点图标 自定义样式 点击节点后线条变色 自适应高度 搜索后节点关键字标红
- android中viewPager+fragment实现的屏幕左右切换(进阶篇)
- ASP.NET Core Web API下事件驱动型架构的实现(五):在微服务中使用自我监听模式保证数据库更新与消息派发的可靠性
- django之创建第7-4个项目-配置views文件实现url传值
- 基于Java实现(图形界面)小型类 C 语言编译器【100010634】
- SwiftUI手势之控制视图旋转 获取实时度数 实现360度旋转效果 (教程含源码)
- SwiftUI Button实现切换颜色动画
- macOS 开发教程之如何联动Picker和 Image 实现根据选择内容切换图片形状(SwiftUI 教程含源码)
- bat脚本+diskpart 脚本实现自动划分磁盘分区
- layui 通过laytpl模板,以及laypage分页实现
- 转 通过 spring 容器内建的 profile 功能实现开发环境、测试环境、生产环境配置自动切换
- 回调函数实现类似QT中信号机制(最简单)
- 浅析JavaScript中的协程、进程如何切换线程的机制、线程如何切换协程的机制、协程的体现(生成器函数)、协程如何实现异步和非阻塞以及为什么要使用生成器+Promise组合
- [记录]使用setTimeout实现不同时间进行切换文本的颜色
- 如何实现监狱智能化安防集成?
- Android UI-实现底部切换标签(fragment)
- Unity Shader 之 实现简单的动态过场切换图片的效果
- 使用xtrabackup实现MySQL主从复制
- functools.partial 搭配 concurrent.futures 的 map 实现并发异步
- 实现基于组织机构的数据集权限系统的设计思路讲解
- 通过Keepalived实现Redis Failover自动故障切换功能