JS-实现导航栏悬停（续二）

【JS-实现导航栏悬停】

【JS-实现导航栏悬停（续）】

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

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

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

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

最终的代码更改如下：

test.html

div.main{width: 800px;background: #CCC;margin: 10px auto 0; position: relative;}div.content{width: 800px;height: 400px;background: yellow;margin: 10px auto 0; }div.navigation{width: 800px;height: 40px;background: red;margin: 0 auto; top: 400px;left:50%;position: fixed;margin-left:-400px;}div.tab{width: 195px;height: 40px;background: blue;float: left;margin-left: 5px;}

总结：

出现这个问题的原因还是CSS的布局定位不熟悉。

在这里没法通过：margin 0 auto；来设置导航条div水平居中，因为fixed定位的元素没法通过这种方式来定位。

通过margin 0 auto；来定位的元素不能为fixed定位，并且其父元素必须要有固定的宽度。

那么怎么使fixed定位的元素水平居中呢？

通过：left: 50%，将该元素的最左边与父元素宽的中点对其，然后通过marg-left: [该元素宽度的1/2]px；来将这个元素向左移动它的宽度的一般，从而使这个元素居中。

参考：http://ljj284860475.blog.163.com/blog/static/81423862009102713414312/