首页 > PHP资讯 > HTML5培训技术 > JavaScript网站设计实践(二)实现导航栏当前所选页面的

JavaScript网站设计实践(二)实现导航栏当前所选页面的

HTML5培训技术
一、(一)中的代码还可以修改的地方。
 
在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include进来。这样,当要对导航栏进行修改时,只需要修改一个文件,而不用修改所有相关的页面文件。不过,我这里没有这样做,没有抽取出来。
 
二、实现当前页面的标识+不同页面的head头部背景图片的改变
 
现在在(一)实现的基础之上,来实现导航栏当前所选页面的菜单项高亮显示,让访问者一路了然知道“我正在这里”。
 
首先,修改color.css文件,给菜单项增加一个class="here"属性,也就是说等一下这个here是使用javascript动态增加的一个属性。现在先在控制颜色的color.css中设置here的样式声明。追加这个代码:
 
复制代码
#navigation a.here:link,
#navigation a.here:visited,
#navigation a.here:hover,
#navigation a.here:active{
    color:#eef;
    background-color: #799;
}
复制代码
此时,你或者可以先尝试一下,给导航栏中的其中一个
           
           
               

Jay Skipt

               

Jay Skript is going to rock your world

               

Jay Skript is going to rock your world

               

Jay Skript is going to rock your world

               

Jay Skript is going to rock your world

               

Jay Skript is going to rock your world

           
           
               

The Domsters

               

The Domsters have been around,in one form or another,for almost as long.It's only in the past few years taht The Domsters.

           
       
   

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持6不支持0