JavaScript网站设计实践（二）实现导航栏当前所选页面的菜单项高亮显示
一、（一）中的代码还可以修改的地方。
在（一）中，如果是运行在服务器下，如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;
}
此时，你或者可以先尝试一下，给导航栏中的其中一个<a>标签添加一个class="here"的属性，可以看到该菜单项高亮显示。
然后，来创建一个global.js，存放所有页面会用到的js。
在《JavaScript DOM编程艺术》里面，前面几章给我们写了很多个可以使用的函数。现在把这几个有用的函数添加到global.js的文件里面来。
/******************绑定函数到onload事件上的函数*************************/
function addLoadEvent(func){ //参数func为页面加载完成要执行的函数
var oldonload = window.onload; //把现有的window.onload事件处理函数的值存入变量oldonload中
if(typeof window.onload != 'function'){ //判断 如果onload处理函数没绑定任何函数，则添加新函数；否则，追加新函数
window.onload = func;
}else{
window.onload = function(){ //这里使用了匿名函数包纳两个函数
oldonload();
func();
}
}
} /*******************跟JavaScript中的insertBefore方法对应的一个函数*******************/
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextElementSibling);
}
} /******************动态添加class属性的函数*****************************/
function addClass(element,value){ //调用该函数，就是创建一个例如：class="here"，给标签增加了增加了这么一个属性
if(!element.className){
element.className = value;
}else{
newClassName = element.className;
newClassName +=" ";
newClassName += value;
element.className = newClassName;
}
}
添加高亮显示的函数
/*****************高亮显示导航栏当前点击菜单***************************/
function highlightPage(){
//判断
if(!document.getElementById) return false;
if(!document.getElementsByName) return false;
if(!document.getElementById("navigation")) return false; //获取
var nav = document.getElementById("navigation");
var links = document.getElementsByTagName("a"); //逻辑操作
for(var i =0; i<links.length; i++){
var linkurl = links[i].getAttribute("href"); //获取具有href的属性值
var currenturl = document.location.href; //获取当前的href属性值
if(currenturl.indexOf(linkurl) != -1){
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase(); //把提取出来的文本转换为小写
document.body.setAttribute("id",linktext);
}
}
}
addLoadEvent(highlightPage); //最后调用该函数
（1） if(currenturl.indexOf(linkurl) != -1) indexOf（）方法，可以在一个字符串中找一个子串的位置，，没有找到，返回-1，找到返回所在的位置。
（2）
var linktext = links[i].lastChild.nodeValue.toLowerCase(); //把提取出来的文本转换为小写
document.body.setAttribute("id",linktext); 获取到当前链接的最后一个子节点的值——也就是说当前链接的标识文本。 当前链接的是如此这般的：<li><a href="webDesign.html">Home</a></li>，那么获取到的最后一个子节点的值就是”Home“，此时再转换为小写，最后设置到body元素里。
这两行代码可以给body元素分别设置一个唯一的id属性值。如图：此时主页的body是有一个id=”home“，另外我们还有一个id="header"的div，结合这两个id，就可以给不同的页面设置不同的背景图片
3、在webdesign.css添加设置每个页面的header的背景图片
#about #header{
background-image: url(../images/basshead.jpg);
}
#photos #header{
background-image: url(../images/bassist.jpg);
}
#live #header{
background-image: url(../images/drummer.jpg);
}
#contact #header{
background-image: url(../images/lineup.jpg);
}
4、为了看到效果，我们先写出一个about.html的页面，来看看导航栏菜单项和header的背景图片是否改变了
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>webDesign</title>
<link rel="stylesheet" href="style/webdesign.css" />
<link rel="stylesheet" href="style/color.css" />
<link rel="stylesheet" href="style/typography.css" />
<script type="text/javascript" src="js/global.js" ></script>
</head>
<body>
<div id="header">
<img src="data:images/weblogo.gif" />
</div> <div id="navigation">
<ul>
<li><a href="webDesign.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--header部分结束-->
<div id="content">
<h1>About the band</h1>
<ul id="internalnav">
<li><a href="#jay">Jay Skript</a></li>
<li><a href="#domsters">The Domsters</a></li>
</ul>
<div class="section" id="jay">
<h2> Jay Skipt</h2>
<p>Jay Skript is going to rock your world</p>
<p>Jay Skript is going to rock your world</p>
<p>Jay Skript is going to rock your world</p>
<p>Jay Skript is going to rock your world</p>
<p>Jay Skript is going to rock your world</p>
</div>
<div class="section" id="domsters">
<h2> The Domsters</h2>
<p>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.</p>
</div>
</div>
</body>
</html>
效果截图：两个效果都实现了
JavaScript网站设计实践（二）实现导航栏当前所选页面的菜单项高亮显示的更多相关文章
- JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript网站设计实践（一）网站结构以及页面效果设计
这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录 ...
- JavaScript网站设计实践（三）设计有特色的主页，给主页链接添加JavaScript动画脚本
一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...
- JavaScript网站设计实践（六）编写live.html页面 改进表格显示
一.编写live.html页面,1.JavaScript实现表格的隔行换色,并且当鼠标移过时当前行高亮显示:2.是输出表格中的abbr标签的内容 实现后的效果图是这样的: 1.实现思路 在输出表格的时 ...
- JavaScript网站设计实践（五）编写photos.html页面，实现点击缩略图显示大图的效果
一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...
- JavaScript网站设计实践（七）编写最后一个页面 改进表单
一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（3）修改资料、修改密码
在上一篇博客中实现了用户的注销和登录,其实代码里落了点东西,就是用户登录要更新最后一次登录时间和登录IP,这次补上.今天做修改资料和修改密码,TryUpdateModel是新用到的东西. 目录: AS ...
- ASP.NET MVC5 网站开发实践(二) Member区域–管理列表、回复及删除
本来想接着上次把这篇写完的,没想到后来工作的一些事落下了,放假了赶紧补上. 目录: ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一) - 项目框架 ASP ...
- ASP.NET MVC5 网站开发实践(二) Member区域–我的咨询列表及添加咨询
上次把咨询的架构搭好了,现在分两次来完成咨询:1.用户部分,2管理部分.这次实现用户部分,包含两个功能,查看我的咨询和进行咨询. 目录: ASP.NET MVC5 网站开发实践 - 概述 ASP.NE ...
随机推荐
- 【转】Android - Button(按钮)的响应点击事件的4种写法
原文网址:http://www.yrom.net/blog/2011/12/12/android-4-onclicklistener-of-button/ Button控件setOnclickList ...
- 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
- SqlServer中decimal(numeric )、float 和 real 数据类型的区别[转]
decimal(numeric ) 同义,用于精确存储数值 float 和 real 不能精确存储数值 decimal 数据类型最 ...
- mac 修改xcode的版本
http://blog.csdn.net/yangzhenping/article/details/50266245
- 【译】 AWK教程指南 附录B-Actions
Actions 是由下列指令(statement)所组成: 表达式 ( 函数调用,赋值...) print 表达式列表 printf( 格式化字符串, 表达式列表) if( 表达式 ) 语句 [els ...
- MFC文档、视图和框架
文档.视图.框架 文档/视图结构是MFC提供的一种不错的设计,它将数据的处理和显示分开来,这样更便于我们对程序的维护和扩展. 文档 文档对象用于管理和维护数据,包括保存数据.取出数据以及 ...
- python 网络编程（一）---基础
1.理解TCP 1.1 寻址 首先任何基于TCP/IP的网络,每台机器都有唯一的IP地址,只需要知道接受者机器的IP地址,信息就可以传送过去. 其次,TCP通过使用端口号来知道机器究竟是哪个程序应该接 ...
- 《GettingThingsDone》--GTD学习笔记(一）-GTD理论
利用春节假期阅读了<Getting Things Done>一书,下文整理了下阅读过程中做的读书笔记和心得. ==GTD理论== 一. 目的: 1. 收集需要处理的事情把它置于一个脱离大脑 ...
- 【VMware虚拟机】【克隆问题】在VMware 9.0下克隆CentOS6.5虚拟机无法识别eth网卡
[日期]2014年4月23日 [平台]windows 8 vmware workstation 9.0 centos 6.5 [日志]1)执行ifconfig命令,输出: 2)查看/etc/udev/ ...
- SGU132 - Another Chocolate Maniac(状态压缩DP)
题目大意 给定一个N*M大小的大小的蛋糕,蛋糕的有些地方已经放置了东西,要求你在蛋糕上放入尽量少的1*2大小的巧克力,使得蛋糕不能够再放入巧克力 题解 和POJ1038恰好相反,此题是放入尽量少的巧克 ...