基于swiper的tab选项卡

小咪咪 2022-01-11 09:23 541阅读 0赞

<!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>

效果:

![3311][]

转载于:https://blog.51cto.com/11871779/2408187

[3311]: https://note.youdao.com/yws/public/resource/36bfd3b7fdf2b57eef8d2798d6fcbaf3/xmlnote/0E2AF9B37E5343E4B18A6D924EF776EE/3311

发表评论取消回复

表情：

评论列表（有 0 条评论，541人围观）

还没有评论，来说两句吧...

相关阅读

相关 html tab选项卡控件,tab选项卡插件

这是一款使用十分方便的、为移动设备定制的、可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件。在你要显示很多不同的内容时，tab选项卡导航方式是十分有用

阳光穿透心脏的1/2处/ 2022年10月06日 01:50/ 0 赞/ 232 阅读

相关基于easyui tabs选项卡的扩展插件--tabs单击事件

/ easyui tbas组件扩展单击事件 / $.extend($.fn.tabs.methods, { /

川长思鸟来/ 2022年09月22日 04:57/ 0 赞/ 259 阅读

相关语音控制的tab选项卡

前端开发whqet,csdn,王海庆,whqet,前端开发专家 ladies and 乡亲们，程序员同志们，周末仍然坚守工作岗位，或者学习不辍的童鞋们，福音来了。语音识别

川长思鸟来/ 2022年08月27日 09:50/ 0 赞/ 208 阅读

相关 tab选项卡的应用

<style> body\{font-size:13px\} ul,li\{margin:0;padding:0;list-style:none\} \menu li \

蔚落/ 2022年07月12日 03:28/ 0 赞/ 189 阅读

相关基于react开发的可伸缩tabs选项卡

web界面中，我们经常会遇到菜单展示的处理问题，这里，我分享一个自动适配界面与浏览器的可折叠菜单。 1.效果如下所示： ![在这里插入图片描述][04bd4b2877e

今天药忘吃喽~/ 2022年05月22日 06:14/ 0 赞/ 244 阅读

相关 Tab切换选项卡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tab切换选项卡

左手的ㄟ右手/ 2022年05月09日 06:58/ 0 赞/ 274 阅读

相关最简单的tab选项卡

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3VvdGFp

刺骨的言语ヽ痛彻心扉/ 2022年04月16日 06:23/ 0 赞/ 209 阅读

相关 tab切换选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c

ゝ一纸荒年。/ 2022年02月02日 00:45/ 0 赞/ 371 阅读

相关 tab选项卡

tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

た入场券/ 2022年01月21日 09:47/ 0 赞/ 427 阅读

相关基于swiper的tab选项卡

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></ti

小咪咪/ 2022年01月11日 09:23/ 0 赞/ 542 阅读