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区分成两个不同的东西

    日常所遇,随手而记。
  • 相关阅读:
    oracle执行.sql文件
    rematch的基本用法
    dva的基本用法
    redux-saga基本用法
    react-redux的基本用法
    redux的基本概念
    mobx基本概念
    centos 编译安装Apache 2.4
    javascript动态添加一组input
    php配置文件语法
  • 原文地址:https://www.cnblogs.com/zhihou/p/6555094.html
Copyright © 2011-2022 走看看