那个我应该是点击的时候添加样式其他兄弟元素隐藏各自的背景样式转跳到他的那个锚点那 然而好像因为我下面的$(window).scroll(function ()函数用来控制滚动条显示隐藏样式给重复执行了 只要点击其他附近的锚点时候 先是隐藏其他兄弟的样式,然后因为滚动条控制兄弟元素的背景再度会显示一遍再隐藏请问我该怎么改啊 我知道我做的很渣没办法每个锚点背景图不同只能用这种死办法QWQ

#menu{

width:32px;height:360px;

position:fixed;

top:35%;left:50px;

z-index: 3;

list-style: none;

display: none;

}

#menu li{

text-align: center;

margin: 30px auto;

cursor: pointer;

background: url(img/dod.png);

background-size: cover;

width: 10px;

height: 10px;

}

#menu .message{

background: url(img/xinxi.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

#menu .jishus{

background: url(img/jineng.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

#menu .licheng{

background: url(img/jinli.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

#menu .sakuhin{

background: url(img/zuoping.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

#menu .top{

background: url(img/top.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

@keyframes scales{

from{

transform: scale(0);

}

to{

transform: scale(3);

}

}

function louti(){

var _index=0;

$("#menu ul li:eq(0)").click(function(){

$(this).addClass('message');

$("#menu ul li:eq(1)").removeClass('jishus');

$("#menu ul li:eq(2)").removeClass('licheng');

$("#menu ul li:eq(3)").removeClass('sakuhin');

//通过拼接字符串获取元素,再取得相对于文档的高度

var _top=$("#louti1").offset().top;

//scrollTop滚动到对应高度

$("body,html").animate({scrollTop:_top},500);

});

$("#menu ul li:eq(1)").click(function(){

$(this).addClass('jishus');

$("#menu ul li:eq(0)").removeClass('message');

$("#menu ul li:eq(2)").removeClass('licheng');

$("#menu ul li:eq(3)").removeClass('sakuhin');

//通过拼接字符串获取元素,再取得相对于文档的高度

var _top=$("#louti2").offset().top;

//scrollTop滚动到对应高度

$("body,html").animate({scrollTop:_top},500);

});

$("#menu ul li:eq(2)").click(function(){

$(this).addClass('licheng');

$("#menu ul li:eq(1)").removeClass('jishus');

$("#menu ul li:eq(0)").removeClass('message');

$("#menu ul li:eq(3)").removeClass('sakuhin');

//通过拼接字符串获取元素,再取得相对于文档的高度

var _top=$("#louti3").offset().top;

//scrollTop滚动到对应高度

$("body,html").animate({scrollTop:_top},500);

});

$("#menu ul li:eq(3)").click(function(){

$(this).addClass('sakuhin');

$("#menu ul li:eq(1)").removeClass('jishus');

$("#menu ul li:eq(2)").removeClass('licheng');

$("#menu ul li:eq(0)").removeClass('message');

//通过拼接字符串获取元素,再取得相对于文档的高度

var _top=$("#louti4").offset().top;

//scrollTop滚动到对应高度

$("body,html").animate({scrollTop:_top},500);

});

$("#menu ul li:eq(4)").click(function(){

$("#menu ul li:eq(0)").removeClass('message');

$("#menu ul li:eq(1)").removeClass('jishus');

$("#menu ul li:eq(2)").removeClass('licheng');

$("#menu ul li:eq(3)").removeClass('sakuhin');

var _top=$("#louti5").offset().top;

//scrollTop滚动到对应高度

$("body,html").animate({scrollTop:_top},500);

});

$(".down").click(function(){

var _top=$("#louti1").offset().top;

//scrollTop滚动到对应高度

$("body,html").animate({scrollTop:_top},500);

});

$(window).scroll(function () {

if ($(window).scrollTop() > 800 ) {

$("#menu").fadeIn();

}

else {

$("#menu").fadeOut();

}

if ($(window).scrollTop() > 940 && $(window).scrollTop() < 2000) {

$("#menu ul li:eq(0)").addClass('message');

}

else {

$("#menu ul li:eq(0)").removeClass('message');

}

if ($(window).scrollTop() > 2000 && $(window).scrollTop() < 3000) {

$("#menu ul li:eq(1)").addClass('jishus');

}

else {

$("#menu ul li:eq(1)").removeClass('jishus');

}

if ($(window).scrollTop() > 3000 && $(window).scrollTop() < 4000) {

$("#menu ul li:eq(2)").addClass('licheng');

}

else {

$("#menu ul li:eq(2)").removeClass('licheng');

}

if ($(window).scrollTop() > 4000 && $(window).scrollTop() < 5000) {

$("#menu ul li:eq(3)").addClass('sakuhin');

}

else {

$("#menu ul li:eq(3)").removeClass('sakuhin');

}

})

}

louti();

楼梯式导航 html,请问我这样做的一个楼梯式导航有这种问题怎么解决啊 会重复执行添加隐藏样式...相关推荐

  1. 学完css,做了一个csdn导航栏(一步一步做csdn导航栏,内容满满)

    学完css,做了一个csdn导航栏,内容满满 步骤 1.导航栏框架 2.导航栏左边部分 3.导航栏中间部分 4.导航栏右边部分 5.搜索框聚焦和用户头像简介信息展示 知识点 完整代码 番外:本来打算做 ...

  2. 【发现】ASP.NET DEVELOPMENT SERVER 未能开始侦听端口xxxxx以一种访问权限不允许的方式做了一个访问套接字的尝试——解决方法...

    在调试ASP.NET的时候常出现如下错误 错误消息框:   ASP.NET   DEVELOPMENT   SERVER   未能开始侦听端口xxxxx以一种访问权限不允许的方式做了一个访问套接字的尝 ...

  3. 刚刚做了一个菜单导航变亮的效果,共享一下吧!

    ASXC代码: <script> $(function() { //菜单变亮 $(".menubanner>ul>li").find("a[hre ...

  4. 来看看我给女朋友做的“小傻瓜”导航站点

    1.写在前面 之前写了一篇博客<作为一个前端新人,还要不要学 jQuery> 建议大家学习 jQuery,这不,我在学习 jQuery 相关理论知识之余用它给女朋友做了一个小导航网站,不仅 ...

  5. 爆肝!朋友做了个编程导航网站!

    这网站能帮你轻松发现优质编程学习资源,一定不要错过! 前段时间,我的一位在鹅厂做全栈开发的朋友鱼皮,利用工作之余的时间,独自爆肝了 200 多个小时,开发了一个编程导航网站! 网站的目标很简单,帮助大 ...

  6. Delphi做的一个仿Web的导航界面

    完全原生开发,没有使用任何第三方组件,delphi 也是可以做出很精美的界面的. 使用Frame 来实现,实际上很多复杂的界面都可以使用Frame来组合设计,开发复杂界面必备的技术. DelphiWe ...

  7. 使用AJAX做一个页面导航模糊匹配下拉框

    使用AJAX做一个页面导航模糊匹配下拉框 绪论:使用AJAX页面导航模糊匹配下拉框 使用软件: Vs2019 实现方式:三层架构 功能实现是下面的图片 类似就是这样,下面把主样式界面代码放出来 < ...

  8. html文件打开是搜索导航,GitHub - bituplink/OneHtmlNav: 单文件html的网络导航页面,简约并不简单...

    OneHtmlNav 这是基于小呆导航的超级精简版本,之所以投入了不少精力折腾这个导航,是之前自己网站的导航有点功能不足,看到了小呆导航有我需要的功能,但是确是基于CMS的,有点复杂我又不想再搭建一个 ...

  9. request payload怎么发_做了一个个人博客,但不知道怎么介绍

    三月即将过去了,这意味着很多,比如,上市公司要开始准备第一季度的财报了:比如,2019年不知不觉已经过去1/4:比如,金三银四的跳槽季,你拿到满意的offer了吗?... 整个三月份,我大概做了一些事 ...

最新文章

  1. 运维开发必会技能之一——虚拟机管理
  2. 大道至简_阅读笔记02
  3. Hadoop MapReduce概念学习系列之map并发任务数和reduce并发任务数的原理和代码实现(十八)...
  4. 谷歌验证 (Google Authenticator) 的实现原理是什么?
  5. javascript 懒加载技术(lazyload)简单实现
  6. shell脚本给mysql创建表_shell脚本:实现MySQL创建数据库和删除数据库的脚本
  7. C++函数如何操作堆栈指针esp
  8. UVA10838 The Pawn Chess
  9. tooltip 提示多行显示
  10. sm缩写代表什么意思_PE给水管常见的字母缩写都代表什么?
  11. 表格文字超数量就竖排_干货 |超实用Word、Excel、PPT软件技能
  12. em算法 实例 正态分布_4-EM算法原理及利用EM求解GMM参数过程
  13. 连续41次通过VB100认证,腾讯安全技术实力再获国际权威认可
  14. CText更新至V1.1.0
  15. 国空三区三线思考之:Arcgis自上而下从左到右进行编号
  16. 解决AppBarLayout嵌套WebView滑动冲突的问题
  17. C语言 命令行 execl函数
  18. 量化交易python 文件_python数据分析与量化交易
  19. 判赔腾讯108万,科技公司为公众号“刷量”构成不正当竞争
  20. 读书报告1500字计算机大学篇,《活着》读后感_读书心得1500字大学篇

热门文章

  1. 计算机非线编辑配置,非线性编辑系统配置 剪辑台式电脑 图形工作站 视频剪辑机...
  2. 无纺布带行业调研报告 - 市场现状分析与发展前景预测
  3. spring中的前置处理器和后置处理器区别
  4. 专题开发十二:JEECG微云高速开发平台-基础用户权限
  5. python 支付宝支付 无效根证书_python实现银联支付和支付宝支付接入
  6. dota2从窗口模式切换到独占全屏模式后黑屏解决办法
  7. 服务器维护后稀有会马上刷新么,【已开服】《新天龙八部》5月27日全服更新维护公告...
  8. 最长公共子序列c++实现
  9. Windows系统一键备份还原工具,支持UEFI和Legacy模式
  10. 卫星通信,给手机市场带来了什么?