zoukankan      html  css  js  c++  java
  • 左侧菜单栏,有对个li对应一个content

    html部分截图

    不多说直接上js

    /*左侧导航栏*/
    var sect=$(".sect");

    $(".nav-list .nav-a").each(function(i){
    $(this).on("click",function(){
    $(this).addClass("cur").siblings().removeClass("cur");
    $(".content-all .sec").eq(i).removeClass("hide").siblings().addClass("hide");
    $("body,html").animate({
    scrollTop:0
    },300);
    });
    })
    /*多个内容一个页面*/
    $(".nav-list .nav-btli").each(function(i){
    $(this).on("click",function(){
    $(this).addClass("cur").siblings().removeClass("cur");
    if(i*1<2){
    $(".section68").removeClass("hide").siblings().addClass("hide");
    }else if(i*1>=2 && i*1<4){
    $(".section113").removeClass("hide").siblings().addClass("hide");
    }
    if(i==0 || i==2){
    $('body,html').animate({
    scrollTop:0
    },300);
    }else{
    $('body,html').animate({
    scrollTop:sect.eq(i).offset().top
    },300);
    }
    });
    })

    总结:就相当于你把这1对1和多对1区分成两个不同的东西

    日常所遇,随手而记。
  • 相关阅读:
    纪念日给男(女)朋友的表白页面
    Vue组件的传值(非父子之间)
    express脚手架的安装和使用
    MongoDB数据库
    vuex状态
    MVVM框架的简单理解
    关于vue脚手架
    申请百度密钥
    svg
    微信小程序开发学习笔记
  • 原文地址:https://www.cnblogs.com/zhihou/p/6555094.html
Copyright © 2011-2022 走看看