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

左侧菜单栏,有对个li对应一个content的更多相关文章

  1. PHP系统左侧菜单栏的管理与实现

    在日常的开发工作中,面对后台的日益增长的业务,以及后期业务的迭代开发,通常会选择添加菜单栏的形式来扩充业务功能,同样日益增长的后台菜单选项也为我们后期的维护,产生了一定的困难性.为此我总结出自己关于左 ...

  2. WebStorm设置左侧菜单栏背景和字体设置

    WebStorm左侧菜单栏 webstorm是一款前端IDE利器,个人感觉黑色的背景比较炫酷,刚开始从网上下载的主题只能修改编辑窗口的背景色,经过查询资料终于把左边菜单栏的背景色也修改了. 第一步:点 ...

  3. WPF仿网易云音乐系列(一、左侧菜单栏:Expander+RadioButton)

    1.简介 上一篇咱们说到,网易云音乐的左侧菜单栏可以通过Expander+RadioButton来实现,具体如何实现,咱们下面开始干: 首先来一张网易云音乐PC版原图(个人觉得PC版比UWP版左侧菜单 ...

  4. 用html和css写一个头部header和左侧菜单栏menu-bar固定的的页面

    这个页面header部分是100%的宽度,60px的高度,左侧是刚好一屏的高度,180的宽度,右侧的部分把剩余的空间占满,刚开始的时候还没怎么接触这样的页面,以为使用js读取浏览的可视化宽高,然后在做 ...

  5. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  6. WebStorm设置左侧菜单栏背景色和样式

    WebStrom一直以来都是默认的白色主题,今天想修改了下主题皮肤,结果导致左侧项目资源栏和顶部菜单栏也变成了黑色,结果无法改变回来,网上查了各种帖子,居然也没找到解决方法,自己研究了半天,终于搞定了 ...

  7. webstom 配置git 后左侧菜单栏配色调整

    ws配置了git进行版本管理,但是最近改了主题,发现左侧列表的文件名的颜色都是一个颜色了.我想要的是,对未提交的文件用颜色区分,新建的,修改的,冲突的分别设置不同的颜色,不知在哪里能设置,求助 老规矩 ...

  8. PHP左侧菜单栏的管理与实现

    以thinkPHP5.0为例 后台config.php文件里配置 //配置文件设置菜单内容属性 'menu' => [ [ 'name' => '菜单栏1', 'url' => '/ ...

  9. 左侧菜单栏右侧内容(改进,有js效果)

    (如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版 这是上一篇文章的改进. 上一篇文章的左侧菜单是没有子目录的. 这是效果图: 左侧菜单代码: <div class=&quo ...

随机推荐

  1. Hibernate 再接触 组件映射

    将另外一个类嵌入到另外一个类 从而合并生成一张表 Husband.java package com.bjsxt.hibernate; import javax.persistence.Embedded ...

  2. ArcGIS案例学习笔记3_1_地理配准案例_目视找点

    ArcGIS案例学习笔记3_1_地理配准案例_目视找点 计划时间:第3天上午 方法:地理配准/添加链接点/左键/右键/输入坐标 数据:江苏省.zip 矢量:省界,市界,GPS WGS84 地理坐标系 ...

  3. java中garadle工程没有src问题

    https://www.jb51.net/article/142791.htm 前几天遇到一个问题,就是使用ider创建gradle项目后,src目录没有自动生成出来,今天就给大家分享一下怎么解决. ...

  4. gdufe1538-是男人就上100层-(三维bfs)

    Problem Description: 桐老爷和UGO终于来到了名为“是男人就上一百层的塔”的下面,听说大祭司在第100层沉睡.为了题目需要,我把这个塔的层数随机打乱,层数的话大家就忘了前面的100 ...

  5. hdu4497-GCD and LCM-(欧拉筛+唯一分解定理+组合数)

    GCD and LCM Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total ...

  6. JAVA集合操作异常 ---------Collections.unmodifiableCollection

    1.问题原因 这两天在做开发的时候,在一个首页的列表哪里操作了ArrayList集合,在做递归删除的时候用的是Iterator对象(至于为什么用,来个链接https://blog.csdn.net/m ...

  7. vue分页 点击(非下拉)

    1.主页面 <template> <div class="list"> <template v-if="count"> 55 ...

  8. Java的学习01

    记录每天的学习情况.加油. /** * 测试包装类 * @author 小白 * */ public class TestWrappedClass { public static void main( ...

  9. Linux命令_2

    P42 远程管理 命令 目标 关机/重启 shutdown 查看或配置网卡信息 ifconfig ping 远程登录和复制文件 ssh scp 01.关机/重启 命令: shutdown  选项  时 ...

  10. Nodejs this详解

    [Nodejs this详解] Nodejs中, 文件层this,指向的是module.export. 函数层this,指向的是global对象. 参考:http://www.jb51.net/art ...