JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一、现在我们在网站设计(三)的基础上,来编写about.html页面。
这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV
about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果。
没有写JavaScript之前看到的效果:
实现后的效果图:
这个就是我们现在要做的效果。
1、背景:
我们在about.html页面中写了一个ul列表,然后接着是一段对每个列表的标题进行详细说明的一段文字。文章太长时,使得页面看起来很长,不大美观,所以我们现在做的就是:通过鼠标点击,点击到哪个列表项,就显示出那段文字即可,把不想看的那段文字隐藏。
2、思路
首先把显示出来的存放每个列表项那段文字的div都隐藏掉,然后通过鼠标点击,获取到的href属性值,最后判断要显示出哪个div来。
3、代码
(1)about.js 用来写这个页面用到的JS代码

/******************显示section块的函数*****************/
function showSection(id){
//获取元素
var divs = document.getElementsByTagName("div"); //判断 如果div的className不为section,则跳出循环,否则再次判断当前的id是否等于参数id,不是的话则隐藏
for(var i= 0; i<divs.length; i++){
if(divs[i].className.indexOf("section") == -1) continue;
if(divs[i].getAttribute("id") != id){
divs[i].style.display = "none";
}else{
divs[i].style.display = "block";
}
}
} /****************遍历intervalnav清单里的所有链接******************/
function prepareInternalnav(){
//浏览器对象检测
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.getElementById("internalnav")) return false; //获取元素
var nav = document.getElementById("internalnav");
var links = document.getElementsByTagName("a"); //遍历连接,分割出href属性的值,调用显示section块的函数
for(var i=0; i<links.length; i++){
var sectionId = links[i].getAttribute("href").split("#")[1]; //以#分割,[1]取第二个值,记jay、domsters
if(!document.getElementById(sectionId)) continue; //如果找不到这个id,则退出循环
document.getElementById(sectionId).style.display = "none"; //把class属性值为sectionId的都设置为display:none,然后再显示出来
links[i].destination = sectionId;
links[i].onclick = function(){
showSection(this.destination);
return false;
}
}
} addLoadEvent(prepareInternalnav);

把这个about.js文件包含到about.html的头部后,就可以打开浏览器来看看效果了。
about.html页面ok了。
二、学与思
1、用到了一个分割函数split(character)
array = string.split(character) //参数为指定字符
根据某个指定字符,把一个字符串分割为两个或更多个部分,返回返回的是一个数组。
例如在本页面中的,<li><a href="#jay">Jay Skript</a></li>
使用split()以“#”分割,得到的结果是“”和jay,
我们使用这条语句var sectionId = links[i].getAttribute("href").split("#")[1];取第二个值,得到的便是jay。
2、return false
links[i].onclick = function(){ showSection(this.destination); return false; }
鼠标点击时,调用显示div函数,并且要组织浏览器的默认行为,所以,return false。
JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素的更多相关文章
- JavaScript网站设计实践(一)网站结构以及页面效果设计
这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录 ...
- JavaScript网站设计实践(六)编写live.html页面 改进表格显示
一.编写live.html页面,1.JavaScript实现表格的隔行换色,并且当鼠标移过时当前行高亮显示:2.是输出表格中的abbr标签的内容 实现后的效果图是这样的: 1.实现思路 在输出表格的时 ...
- JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本
一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...
- JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果
一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...
- JavaScript网站设计实践(七)编写最后一个页面 改进表单
一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...
- JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...
- 优化网站设计(十):最小化JAVASCRIPT和CSS
前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表
显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据 目录 ASP.N ...
- [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞
目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...
随机推荐
- CSS sprite 圆角——源代码
所需图片: corner ...
- [转] C# Winform 拦截关闭按钮触发的事件
原文 C# Winform 拦截关闭按钮触发的事件 用户关闭软件时,软件一般会给“是否确认关闭”的提示. 通常,我们把它写在FormClosing 事件中,如果确定关闭,就关闭:否则把FormClos ...
- 《深入Java虚拟机学习笔记》- 第5章 Java虚拟机
一.JVM的生命周期 当启动一个Java程序时,一个Java虚拟机实例就诞生了:当该程序关闭退出时,这个Java虚拟机也就随之消亡: JVM实例通过调用某个初始类的main方法来运行一个Java程序: ...
- 168. Excel Sheet Column Title
Excel Sheet Column Title Given a positive integer, return its corresponding column title as appear i ...
- CentOS 7.0 安装 python3.X 脚本
#!/bin/sh #第一个Linux下的脚本,太多不明白的地方,只是依着网上的例子照葫芦画瓢,能正常运行即可 #运行环境 CentOS 7.0 版本 #首行指定程序的路径,以#号开头的行是注释行 # ...
- Hadoop概念学习系列之分布式文件系统(三十)
===============> 数据量越来越多,在一个操作系统管辖的范围存下不了,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,因此迫切需要一种系统来管理多台机器上的文件,这就 ...
- jquery-ui 之Sortable详解
<div class="aaa"> <ul id="sortable"> <li id="test">I ...
- 4.22 注入js需要加 addjavascriptinterface
由于项目需要,再次使用到了android的webview,webview要加载的页面是html5的页面: 需要有点击webview中的控件的交互,所以需要在android应用中注入一个js对象: 通过 ...
- js使用技巧大全
1.防止重新构建 var constructedHtml = ""; for(var i = 0,len = arr.length;i < len;i++){ constru ...
- sublime Text 3的默认快捷键大全
Ctrl+M 光标跳至对应的括号 Alt+. 闭合当前标签 Ctrl+Shift+A 选择光标位置父标签对儿 Ctrl+Shift+[ 折叠代码 Ctrl+Shift+] 展开代码 Ctrl+KT 折 ...