zoukankan      html  css  js  c++  java
  • jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果
    单独写一个选项卡切换很方便
    但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱

    <div class="bodyCenter">
    <div class="nav">
    <span class="on">新闻</span>
    <span>热点</span>
    <span>动态</span>
    </div>
    <div class="main">
    <div class="boxModule active">这是一条新闻</div>
    <div class="boxModule">------这是一条热点------</div>
    <div class="boxModule">~~~这是一条动态~~~</div>
    </div>
    </div>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    body{ background-color: #f6f6f6}
    .bodyCenter{
     600px;
    margin: 100px auto;
    }
    .nav{
    overflow: hidden;
    }
    .nav span{
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    float: left;
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
    }
    .nav span.on{
    background-color: #f6f6f6;
    }
    .main{
    padding: 30px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    }
    .main .boxModule{ display: none;}
    .main .boxModule.active{ display: block;}
    </style>


    正常单个的选项卡切换

    $(".nav span").click(function () {
    let $index = $(this).index()
    $(this).addClass("on").siblings().removeClass("on")
    $(".main .boxModule").eq($index).show().siblings().hide()
    })


    如果一个页面有多个选项卡效果那样只能复制粘贴然后修改参数
    下面是我做的一个简单的封装,只要调用那个方法传入两个参数就好了

    tabMethod(".nav span", ".main .boxModule")
    function tabMethod(tabNav, tabModule) {
    $(tabNav).click(function () {
    console.log('sadsa')
    let $index = $(this).index()
    $(this).addClass("on").siblings().removeClass("on")
    $(tabModule).eq($index).show().siblings().hide()
    })
    }


    因为是基于jquery写的、所以在使用的时候需要引入jquery
    用的是jquery.min.js

  • 相关阅读:
    from __future__ import *
    每日一题力扣102
    每日一题力扣228
    每日一题力扣409
    每日一题力扣135 分糖果 中级
    【K短路】牛慢跑
    【2021-06-12】只有团队作战,才能更好生存
    【2021-06-11】不怕事情被砸,就怕团队不愿意承压
    【2021-06-10】压力需主动承受,才能进步
    【2021-06-09】日记和睡觉治疗法
  • 原文地址:https://www.cnblogs.com/yequxue/p/13097703.html
Copyright © 2011-2022 走看看