左侧菜单栏,有对个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区分成两个不同的东西
左侧菜单栏,有对个li对应一个content的更多相关文章
- PHP系统左侧菜单栏的管理与实现
在日常的开发工作中,面对后台的日益增长的业务,以及后期业务的迭代开发,通常会选择添加菜单栏的形式来扩充业务功能,同样日益增长的后台菜单选项也为我们后期的维护,产生了一定的困难性.为此我总结出自己关于左 ...
- WebStorm设置左侧菜单栏背景和字体设置
WebStorm左侧菜单栏 webstorm是一款前端IDE利器,个人感觉黑色的背景比较炫酷,刚开始从网上下载的主题只能修改编辑窗口的背景色,经过查询资料终于把左边菜单栏的背景色也修改了. 第一步:点 ...
- WPF仿网易云音乐系列(一、左侧菜单栏:Expander+RadioButton)
1.简介 上一篇咱们说到,网易云音乐的左侧菜单栏可以通过Expander+RadioButton来实现,具体如何实现,咱们下面开始干: 首先来一张网易云音乐PC版原图(个人觉得PC版比UWP版左侧菜单 ...
- 用html和css写一个头部header和左侧菜单栏menu-bar固定的的页面
这个页面header部分是100%的宽度,60px的高度,左侧是刚好一屏的高度,180的宽度,右侧的部分把剩余的空间占满,刚开始的时候还没怎么接触这样的页面,以为使用js读取浏览的可视化宽高,然后在做 ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
- WebStorm设置左侧菜单栏背景色和样式
WebStrom一直以来都是默认的白色主题,今天想修改了下主题皮肤,结果导致左侧项目资源栏和顶部菜单栏也变成了黑色,结果无法改变回来,网上查了各种帖子,居然也没找到解决方法,自己研究了半天,终于搞定了 ...
- webstom 配置git 后左侧菜单栏配色调整
ws配置了git进行版本管理,但是最近改了主题,发现左侧列表的文件名的颜色都是一个颜色了.我想要的是,对未提交的文件用颜色区分,新建的,修改的,冲突的分别设置不同的颜色,不知在哪里能设置,求助 老规矩 ...
- PHP左侧菜单栏的管理与实现
以thinkPHP5.0为例 后台config.php文件里配置 //配置文件设置菜单内容属性 'menu' => [ [ 'name' => '菜单栏1', 'url' => '/ ...
- 左侧菜单栏右侧内容(改进,有js效果)
(如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版 这是上一篇文章的改进. 上一篇文章的左侧菜单是没有子目录的. 这是效果图: 左侧菜单代码: <div class=&quo ...
随机推荐
- CentOS7下搭建LNMP记录
OS:使用虚拟机最小化安装的CentOS 7系统:配置好防火墙,SELINUX,YUM源,IP地址等. 0.因为采用了最小化安装系统,所缺少的包比较多,必要工具先安装一下 yum install gc ...
- vc读取当前路径和读取配置ini文件
//获取路径 std::string GetApplicationDir() { HMODULE hModule = GetModuleHandleW(NULL); WCHAR wpath[MAX_P ...
- reids遇到问题
今天重启爬虫服务器在连接redis数据库时突然报错:MISCONF Redis is configured to save RDB snapshots, but it is currently not ...
- google image
google图片抓取 google图片是base64加密的,而且base64后的信息放在script信息里面 import pymysql from lxml import etree import ...
- NYOJ20-吝啬的国度-图-dfs
20-吝啬的国度 内存限制:64MB时间限制:1000ms特判: No 难度:3 题目描述: 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...
- 以root用户运行jenkins中shell命令 重要
以centOS系统为例,记录下修改Jenkins以root用户运行的方法. 修改Jenkins配置文件 # 打开配置文件vim /etc/sysconfig/jenkins# 修改$JENKINS_U ...
- SpringCloud---Feign上传下载详解
1.使用原因 公司最近做的项目在用SpringCloud,涉及到了上传.但是Feign本身是不支持文件类型的.所以这里把上传下载的实现分享一下. 2.所需配置 这是自己实现的一个formEncoder ...
- 03_java基础(六)之CRUD实现
1.简单实现 package com.day01.station.dao; /** * Created by Administrator on 2018/2/1. */ import java.sql ...
- java课后作业总结
今天的课后作业是做一个查找一段文章中单词出现的概率,统计并 输出出现概率最高的几个单词.拿到题目,老师还是往常一样提醒着我们先分析题目,构建大概的编程思路.程序需要遇到文本文件的输入输出操作,这一直一 ...
- 修改Eclipse主题与Eclipse中使用SVN
自从开始IDEA后,很久没用eclipse了,有位老同学问我eclipse中如何使用SVN?我就打开eclipse试试,白光太刺眼了~作为强迫症修改下主题.结果如下: 修改完编辑的背景颜色,并没有很好 ...