css.css文件
body{
font-size:12px
font-family:Arial,
Helvetica,
sans-serif
margin:0px
padding:0px
color:white
}
ul,li{
margin:0px
padding:0px
}
li{
display:inline
list-style:none
text-align:center
font-weight:bold
float:left
}
a:link{
color:#336601
text-align:center
text-decoration:none
float:left
width:100px
padding:3px
5px
0px
5px
}
a:visited{
color:#336601
text-align:center
text-decoration:none
float:left
padding:3px
5px
0px
5px
width:100px
}
a:hover{
color:white
float:left
padding-left:6px
text-align:center
width:100px
text-decoration:none
background-color:#539D26
}
a:active{
color:white
float:left
padding:3px
3px
0px
20px
width:100px
text-align:center
text-decoration:none
background-color:#539D26
}
#nav{
width:600px
height:30px
border-bottom:0px
padding:0px
5px
position:absolute
z-index:1
left:
198px
top:
25px
}
.list{
line-height:20px
text-align:left
padding:4px
font-weight:normal
}
.menu1{
width:120px
height:auto
margin:6px
4px
0px
0px
border:1px
solid
#9CDD75
background-color:#F1FBEC
color:#336601
padding:6px
0px
0px
cursor:pointer
overflow-y:hidden
filter:Alpha(opacity=70)
-moz-opacity:0.7
}
.menu2{
width:120px
height:18px
margin:6px
4px
0px
0px
background-color:#F5F5F5
color:#999999
border:1px
solid
#EEE8DD
padding:6px
0px
0px
0px
overflow-y:hidden
cursor:pointer
}
这是当然的,页面都跳转了,样式肯定不可能自动转到刷新后的页面啦,否则的话如果我的网站通过链接跳转到百度的页面,而刚好我网站的样式与百度的重叠,那么页面就会乱糟糟了。
而前面那两个链接并没有刷新页面,还是在当前页面,肯定就有效果啦。
你应该给每个页面指定一个编号,这样在页面加载时再把对应的导航菜单叠加上active类,比如第3个页面可以这样:
var pageId=2 //2是第三个页面(从0起算)$(function(){
$(".nav a").removeClass("active") //如果每个菜单默认是没有active类的,此行可省略
$(".nav a").eq(pageId).addClass("active")
})
当然,也可以根据当前页面的文件名或其他信息来决定让哪个菜单项为当前项。总之,你不要指望在当前页面去直接控制跳转后的页面样式。
使元素固定在网页中,不需要用到JS的,只需要用到CSS样式就可以了。
使用css 中的 position:fixed fixed是相对于浏览器的定位,设置了这个样式的元素将不会随页面滚动而改变位置,固定在屏幕中。
如 :
.classname {
position:fixed
left:0
top:0
z-index:9999
}