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

    日常所遇,随手而记。
  • 相关阅读:
    nodejs获取服务器数据到页面
    Struts 2
    JQuery
    JDBC
    Hiberbate
    EasyUi
    JavaScript
    利用 HashSet 去过滤元素是否重复
    HTML
    MySQL
  • 原文地址:https://www.cnblogs.com/zhihou/p/6555094.html
Copyright © 2011-2022 走看看