JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

简介: 原文:JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素一、现在我们在网站设计(三)的基础上,来编写about.html页面。
原文: 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。

 

 

 

 

 

 

 

目录
相关文章
|
13天前
|
移动开发 IDE 前端开发
HTML基础-标签与元素:构建网页的基石
【6月更文挑战第1天】HTML是网页基础,由标签和元素定义内容结构与样式。本文介绍HTML标签(如`<p>`)和元素(包括开始、结束标签及内容),并列出常见错误:忘记闭合标签、错误嵌套顺序、不恰当使用自封闭标签及混淆标签与属性。建议遵循标准、使用IDE辅助、验证代码和持续实践来避免错误。示例代码展示基本用法:`<html><head><title>...</title></head><body>...</body></html>`。学习HTML标签与元素是前端开发入门关键。
|
2天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
6 2
|
2天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
3天前
|
存储 前端开发 JavaScript
HTML元素周期表
HTML元素周期表
14 1
|
8天前
|
前端开发 JavaScript 开发者
HTML基础-块级元素与内联元素
【6月更文挑战第6天】HTML中的元素分为块级和内联元素,两者在网页布局中扮演重要角色。块级元素占用整行,可设置宽高,常用于组织结构;内联元素只占内容宽度,常用于文本样式和链接。理解它们的区别并正确选择是创建清晰布局的关键。常见问题包括错误选择元素、忽视默认样式和不熟悉`display`属性。解决方法包括根据语义选择元素、清除默认样式以及灵活使用`display`属性转换元素行为。熟练掌握这些能提升网页的语义化、可访问性和布局效率。
|
10天前
|
移动开发 前端开发 数据安全/隐私保护
HTML基础-表单元素与属性:深入浅出指南
【6月更文挑战第4天】本文介绍了HTML表单的基础知识,包括`&lt;form&gt;`标签、各种表单元素(如文本输入、密码、单选、复选、下拉菜单和提交按钮)以及相关属性。易错点包括忘记设置`name`属性、不使用`label`、忽视表单验证和不安全的提交方式。建议使用HTML5内置验证属性增强安全性,并使用`POST`方法处理敏感信息。提供的完整注册表单示例展示了这些概念的应用。
|
12天前
|
前端开发 UED SEO
HTML基础-链接与图片插入:网页的连接与视觉元素
【6月更文挑战第2天】本文介绍了HTML中`<a>`和`<img>`标签的使用,包括链接的基本结构、目标类型以及图片的插入、尺寸调整和对齐方式。常见问题涉及链接和图片路径、缺失`alt`属性及尺寸不匹配,解决方案包括正确引用资源、使用绝对URL和重视`alt`属性。通过示例代码,展示了创建链接和图片的方法,强调了提升网页用户体验的重要性。
|
12天前
|
前端开发 容器
HTML <div> 和<span>
【6月更文挑战第2天】HTML <div> 和<span>。
17 5
|
13天前
|
移动开发 搜索推荐 UED
HTML元素
【6月更文挑战第1天】HTML元素
20 7
|
15天前
|
前端开发 容器
HTML <div> 和<span>
HTML <div> 和<span>