swiperjs实现导航与tab页的联动

本文实例为大家分享了swiperjs实现导航与tab页的联动，供大家参考，具体内容如下

这里主要实现了以下功能：

1.点击导航栏切换tab
2.tab页高度自适应不会影响布局
3.导航栏的拖动
4.tab页的滑动与导航栏联动

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  html,body{
   width: 100%;
  }
  .mains{
   width: 350px;
   height: 500px;
   background: skyblue;
   margin: 0 auto;
  }
  .tab,ul{
   width: 350px;
   height: 30px;
  }
  li{
   height: 30px;
   margin-right: 5px;
  }
  .swiper-bg{
   background: gray;
  }
 </style>
 <link rel="stylesheet" href="./public/swiper.min.css" >
</head>
<body>
  <div class="mains">
    <div class="tab swiper-container">
     <ul class="rank_ul swiper-wrapper">
      <li style="background: #de5055;color:#fff;border-color: #de5055;" class="swiper-slide">女包女鞋榜</li>
      <li class="swiper-slide">家居榜</li>
      <li class="swiper-slide">化妝品榜</li>
      <li class="swiper-slide">女装榜</li>
      <li class="swiper-slide">男装榜</li>
     </ul>
    </div>
    <div class="swiper-container swiper-container8 swiper-bg">
     <div class="swiper-wrapper">
     <div class="swiper-slide">
       女包女鞋榜
       <p>sada</p>
       <p>sada</p>
       <p>sada</p>
       <p>sada</p>
     </div>
     <div class="swiper-slide">
       家居榜
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
     </div>
     <div class="swiper-slide">
       化妝品榜
     </div>
     <div class="swiper-slide">
       女装榜
     </div>
     <div class="swiper-slide">
       男装榜
     </div>
     </div>
     </div>
    </div>
    </div>
 <script src="./public/jquery.min.js"></script>
 <script src="./public/swiper.min.js"></script>
 <script>
  var swiper = new Swiper(".swiper-container8",{
   on:{
    slideChange: function(){
     $(".rank_ul li").css("background","none");
     $(".rank_ul li").css("color","black");
     $(".rank_ul li").css("border-color","#e0e0e0");
     $(".swiper-container8").css("height","auto")
     $(".swiper-container8").css("height",$(".swiper-container8 .swiper-slide").eq(this.activeIndex).height())
     $(".rank_ul li").eq(this.activeIndex).css("background","#de5055");
     $(".rank_ul li").eq(this.activeIndex).css("border-color","#de5055");

     $(".rank_ul li").eq(this.activeIndex).css("color","#fff");
    },
   }
  });
  var tab = new Swiper(".tab",{
   slidesPerView : 3.5,
   watchSlidesProgress : true,
   watchSlidesVisibility : true,
  });
  var ul = document.getElementsByClassName("rank_ul")[0];
  var lis = ul.children;
  $(".swiper-container8").css("height",$(".swiper-container8 .swiper-slide").eq(0).height())
  for(var i = 0;i < lis.length;i++){
   var li = lis[i];
   li.index = i;
   li.onclick = function(){
   $(".rank_ul li").css("background","none");
   $(".rank_ul li").css("color","black");
   $(".rank_ul li").css("border-color","#e0e0e0");
   $(this).css("background","#de5055");
   $(this).css("color","#fff");
   $(this).css("border-color","#de5055");
   $(".swiper-container8").css("height","auto")
   $(".swiper-container8").css("height",$(".swiper-container8 .swiper-slide").eq(this.index).height())
   swiper.slideTo(this.index);
   }
  }
 </script>
</body>
</html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • swiper4实现移动端导航栏tab滑动切换

    swiper4移动端导航栏tab滑动切换效果,供大家参考,具体内容如下 效果如图: 首先引入swiper的css和js文件 官网下载地址 <link href="swiper.min.css" rel="stylesheet"> <script src="swiper.min.js"></script> html结构部分 <body> <div class="tab">

  • Swiper实现导航栏滚动效果

    在一些移动app中,总能看到导航栏是可以滚动,下列例子是在vant的官方文档中看到的,这样的滚动效果利用Swiper也可以实现,效果实现的思路是,根据当前点击的"标签"为起点,当前标签"的位置大于视口的一半时,让容器的位置偏移一定的位置,让当前点击的"标签"始终在视口的中间位置. 1.引入相关插件 <link rel="stylesheet" href="../css/swiper.css" > <

  • 基于HTML+CSS+JS实现增加删除修改tab导航特效代码

    基于HTML+CSS+JS实现增加删除修改tab导航特效代码

    先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&

  • 微信小程序 swiper制作tab切换实现附源码

    微信小程序 swiper制作tab切换实现附源码

    微信小程序 swiper制作tab切换 实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view

  • Javascript Tab 导航插件 (23个)

    Javascript Tab 导航插件 (23个)

    Jquery插件 1.jQuery UI Tabs 这个tab脚本已经绑定在jqueryUI库里,它有很多的配置项,比如你可以配置出可以滚动的tab,tab嵌套等等. 2. jQuery idTabs idTabs可以让你在网页中轻松地加入tab页,而且它还可以对它进行无穷无尽扩展. Mootools插件 3.MooTabs Mootabs是mootools1.1实现的一个微型插件,可以通过ajax来加载tab. 4.Pluggable MooTools Tabs 5.Sliding Tabs

  • swiper4实现移动端导航切换

    swiper4实现移动端导航切换

    本文实例为大家分享了swiper4实现移动端导航切换的具体代码,供大家参考,具体内容如下 首先导入 <link rel="stylesheet" href="css/swiper.min.css" rel="external nofollow" rel="external nofollow" > <script src="js/jquery-1.10.1.min.js"></s

  • 微信小程序实现tab和swiper切换结合效果

    微信小程序实现tab和swiper切换结合效果

    本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码,供大家参考,具体内容如下 先上效果图: 实现代码如下: wxml页面 <scroll-view scroll-x="true" class="weui-navbar"> <block wx:for-items="{{tabs}}"> <view id="{{index}}" class="{{activeIndex

  • swiperjs实现导航与tab页的联动

    swiperjs实现导航与tab页的联动

    本文实例为大家分享了swiperjs实现导航与tab页的联动,供大家参考,具体内容如下 这里主要实现了以下功能: 1.点击导航栏切换tab 2.tab页高度自适应不会影响布局 3.导航栏的拖动 4.tab页的滑动与导航栏联动 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&

  • layui点击导航栏刷新tab页的示例代码

    layui的tab也默认是切换,不会刷新,想要达到点击导航栏刷新tab的功能只需在tab.js文件中将autoRefresh: false,改为true. 以上这篇layui点击导航栏刷新tab页的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue实现侧边导航栏于Tab页关联的示例代码

    Vue实现侧边导航栏于Tab页关联的示例代码

    目录 技术栈 效果 分析 技术栈 侧边栏用 Antdtab使用element 效果 <template> <div class="main-card"> <el-row> <el-col :span="3"> <div class="menu-all"> <div class="menu-head"> <span class="menu-h

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  • 微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下: 我在首页点击"5万以上"他会把跳转到买车页然后同时把"5万以上"这个筛选条件带到买车页. 之前navigator导航是可以跳转并携带数据的,但这一次官方更新加了个新东西-----switchTab,专门用来实现tab页的跳转,但禁止携带数据 那么如果还想要实现我们的效果只能用别的方法了 想了一下有两种思

  • 基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

    1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 1.2.   实践 HTML代码片段 <div class="container-fluid"> <div class="row"> <!--添加左侧菜单栏 --> <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> <div class

  • JQuery Mobile实现导航栏和页脚

    导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). 导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a&g

  • 值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. 一.效果展示 折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了. 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以Tab页的形式打开对应的页面 4.支持菜单折叠 5.打开的菜单过多时自动换行显示,折叠后自适应 二.代码示例 有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备.本文主要使用的它的菜单的效果,下面就来看看Ac

  • Android中TabLayout+ViewPager实现tab和页面联动效果

    TabLayout+ViewPager实现tab和页面联动效果 xml中: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" an

  • 用jQuery技术实现Tab页界面之二

    这是第二篇文章,第一篇可以参考Tab页界面,用jQuery及Ajax技术实现代码特点: 1,完全实现Tab逻辑功能,Tab的样式完全交由前端代码控制,很灵活. 2,tab页触发事件是click. 3,界面以table布局,只需要配置关键对象的class和id 即可工作. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

随机推荐