当前位置:  首页  >  PHP教程  >  PHP 应用  >  常见问题

JS实现导航栏悬停效果(续2)_javascript技巧

发现原来的方法还有是有几个问题:首先Js代码冗余,导航条上的Tab是用js实现跳转而不是超链接,还有导航条本身用fixed定位,但没有被设置为水平居中,而是在JS中更改left值使其居中
【JS-实现导航栏悬停】
【JS-实现导航栏悬停(续)】

用Jquery重新写完这个页面之后,发现原来的方法还有是有几个问题:

1.首先Js代码冗余,导航条上的Tab是用js实现跳转而不是超链接;

2.还有导航条本身用fixed定位,但没有被设置为水平居中,而是在JS中更改left值使其居中。

问题2就导致了,当浏览器窗口尺寸发生变化的时候,浏览器中的p的位置都发生了变化,也就导致了没法通过页面中的p动态的给已fixed定位的导航条来定位。

最终的代码更改如下:

test.html

代码如下:






扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有