HTML、CSS和JavaScript学习五(案例分析二表格、项目列表和超链接)

最新推荐文章于 2022-04-20 20:43:22 发布
最新推荐文章于 2022-04-20 20:43:22 发布
阅读量1k 收藏 2
点赞数
分类专栏： java学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rainmeterlinux/article/details/8296343
版权


二．表格、列表和链接的结合使用，实现的功能是将数据进行表格的格式化，在表格的每一项中有一个链接，点击链接有两种效果：1.可以打开所有的列表项2.只能打开一个列表项。先看效果图

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>无标题文档</title>
	<style type="text/css">
	table{
	border:#0033CC 1px solid;
	}
	table td{
	border:#990000 1px solid;
	background-color:#CCFFFF;
	}
	table td div{
	background-color:#00FFFF;
	display:none;
	}
	table td a:link,table td a:visited{
	text-decoration:none;
	color:#3300CC;
	}
	.open{
	display:block;
	}
	.close{
	display:none;
	}
	</style>
	<script type="text/javascript" src="doctool.js"></script>
	<script type="text/javascript">
	/*1.可以打开所有的列表项
	此方法是可以同时打开多个列表，我们现在进行改进，需求是：开一个关其它，就是说只能有一个是开着的
	function list()
	{
		var aNode=event.srcElement;	
	var tdNode=aNode.parentNode;
		var divNode=tdNode.getElementsByTagName("div")[0];
		if(divNode.className=="open")
		{
			divNode.className="close";
		}else{
			divNode.className="open";
		}
	}
	*/
	//2.只能打开一个列表项。
	function list()
	{
		var aNode=event.srcElement;//通过event对象获取事件源，即<a>标签节点注册的事件
		var tdNode=aNode.parentNode;//获取当前节点的父节点，即<a>标签的父节点为<td>
		var divNode=tdNode.getElementsByTagName("div")[0];//通过节点的getEelementsByTagName（）方法获取该节点下所有的div标签，并且只取第一个。即<td>标签节点下的所有div节点(实际上<td>节点下只有一个div，不过也要有角标[0])。
		var divNodes=getByTag("div");//通过document对象获取当前html页面中所有的div节点，并且只取第一个，即在html页面中你所看到的所有的div节点，注意和上面的区别。
	//当点击<a>标签中的链接文字时，会触发该函数，通过上面一系列获取标签节点的操作，来进行下面的for循环，循环是以divNodes的长度为条件，每次都要判断divNodes中的每个div节点是否是当前事件源div的节点，如果是就再次进入判断，该节点的的className属性是什么，如果是打开的就关闭，如果关闭就打开。这些打开和关闭都属于样式，都在<style>中定义。如果判断不是当前节点就关闭。
		for(var i=0;i<divNodes.length;i++)
		{
			if(divNodes[i]==divNode)
			{
				if(divNode.className=="open")
				{
					divNode.className="close";
				}else{
					divNode.className="open";
				}
			}else{
				divNodes[i].className="close";
			}
		}
	}
	</script>
	</head>
	
	<body>
	<table>
		<tr>
			<td>
				<a href="javascript:void(0)"  οnclick="list()">好友菜单列表</a>
				<div>
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
				</div>
			</td>
		</tr>
		
		<tr>
			<td>
				<a href="javascript:void(0)"   οnclick="list()">好友菜单列表</a>
				<div>
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
				</div>
			</td>
		</tr>
		
		<tr>
			<td>
				<a href="javascript:void(0)"   οnclick="list()">好友菜单列表</a>
				<div>
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
				</div>
			</td>
		</tr>
		
		<tr>
			<td>
				<a href="javascript:void(0)"  οnclick="list()">好友菜单列表</a>
				<div>
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
				</div>
			</td>
		</tr>
		
		<tr>
			<td>
				<a href="javascript:void(0)"  οnclick="list()">好友菜单列表</a>
				<div>
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
					大家看到<br />
				</div>
			</td>
		</tr>
	</table>
	</body>

html代码(定义界面)：

整个界面是以表格的形式展现，<table>标签定义在<body>标签中；<table>标签中有5行，用<tr>标签表示；每行中有一个单元格，用<td>表示；每个单元格中有一个超链接，用<a>表示，和一个<div>标签。

<a>标签中的href="javascript:void(0)"表示点击这个超链接没有效果，也就是不会打开新的页面，等同于href="#"；另外给这个超链接注册一个事件（也就是javascript代码）。

css代码(定义样式)：

分别有标签选择器(table)、多重选择器(table td和table td div)、复合选择器(table td a:link,table td a:visited)和类选择器(.open和.close)。

Javascript代码(动态交互)：

有两个<script>标签，第一个是将一个封装好的js文件导入，第二个是在本html文件中定义javascript代码，里面主要是函数(看代码的注释部分)，对应<a>注册的点击事件源。下面看引入的doctool.js文件的代码。

	// JavaScript Document
	var doc=document;
	function getId(id)
	{
		return doc.getElementById(id);//通过id,获取指定节点（也就是指定标签）
	}
	
	function getByTag(name)
	{
		return doc.getElementsByTagName(name);	//通过标签的名称获取当前html页面中所有的节点的名字，返回的是一个集合，例如<a>的标签名就是a，<table>的标签名就是table
	}
	function getByName(name)
	{
		return doc.getElementsByName(name);	//通过标签的属性name获取当前html页面中所有的节点的名字，注意和getByTag的区别，
	}




rainmeterLotus
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础案例+代码
qq_48687155的博客
08-17 1031
前端基础Javascript练习题
HTML CSS3 04 图像标签和路径超链接标签，注释标签 综合案例
weixin_43960370的博客
03-03 301
文章目录HTML常用标签图像标签和路径路径之相对路径路径绝对路径超链接标签注释特殊字符 HTML常用标签 图像标签和路径 路径之相对路径 路径绝对路径 超链接标签 注释 ctrl + ‘’/’’ 快速添加注释 特殊字符 熟练记忆 & nbsp; & lt; & gt; ...
JavaScript入门——函数定义案例分析
zhu_fangyuan的博客
11-13 107
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> /** * 函数： * 1. 绝对值函数 */ //定义方式1 function abs(x) { //手动抛出异常来判断
157个HTML+CSS+JavaScript前端开发24实例
10-10
157个HTML+CSS+JavaScript前端开发24实例
HTML标签、超链接、表格标签
uzi2200的博客
08-18 238
HTML标签 图像标签 img标签用于在网页中插入一副图像 <!-- 不要写带盘符的绝对路径, 因为以后项目更多的是发不到Linux系统,而Linux系统是没有盘符的, 所以到时候路径就是错的! --> <img src="imgs/meinv.jpg" width="50%" border="10px"/> 其中 src属性用于指定图片的url地址(即图片的所在路径) width属性:用于指定图片的宽度, 单位可以是px(像素), 或者 %(百分比) height属性:用于
HTML教程与案例.docx
最新发布
07-20
HTML是网页开发的基础，通常与CSS（层叠样式表）和JavaScript一起使用，以增强网页的样式和交互性。如果你对进一步学习HTML或Web开发感兴趣，可以查找更多在线资源和教程，它们提供了更深入的知识和更复杂的案例。
aid1902:aid1902学习案例
03-05
"aid1902:aid1902学习案例"这个标题可能指的是一个学习项目或课程，其中包含了关于HTML的实践案例。下面将详细讨论HTML的相关知识点，并结合"aid1902-master"这个文件名推测这是一个包含源代码和练习材料的项目库。 ...
一号店网站HTML案例
05-01
"一号店网站HTML案例"是一个非常适合初学者进行实践和提升HTML及CSS3技能的项目。这个案例涵盖了构建电商网站的基本元素和设计技巧，是检验学习成果并深化理解的理想选择。以下将详细介绍此案例中可能涉及的关键知识...
zhengnanx.github.io：简历和档案
03-04
【HTML技术详解】 HTML（HyperText Markup Language）是构建网页的标准标记语言，它定义了网页的结构和内容。在"zhengnanx.github.io"这个...通过分析这个项目，我们可以学习如何利用HTML有效地组织和展示个人资料。
aqcd.github.io:漫画和东西
04-04
【aqcd.github.io:漫画和东西】是一个个人博客项目，主要展示了作者对于技术与漫画的结合，通过HTML语言构建了一个充满趣味性的在线平台。在这个博客中，你可以期待找到关于编程、互联网技术和漫画文化的融合，作者...
javascript语言实例100题
热门推荐
anfangw的博客
12-05 1万+
javascript编程实例
HTML+CSS(5)
xiaomin_er的博客
05-13 267
1.CSS Hack CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。 Hack分类 CSS属性前缀法 属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果 前两个前缀加在属性前面，后面两个加载属性值后面 前缀标识 兼容浏览器 _ IE6 +、*
第 2 章 HTML、XML和CSS-带答案
tingfengchui_的博客
01-05 390
第 2 章 HTML、XML和CSS-带答案 1.Web网站开发的5个阶段： 与 、 、 、 和 。 2.静态网页：指没有后台数据库、不含服务端程序的网页；可直接加载到客户浏览器上显示。静态网页主要采用 或 等语言编写。 3.动态网页：指内容可根据不同情况动态变化的网页，是当前网站的主流形式。请简述动态网页的优缺点： 4.超文本标记语言HTML（Hypertext Markup Language）是在万维网上建立超文
HTML 简介,基本标签及列表和表格
dust__的博客
05-20 902
一，HTML网页结构 1.HTML:HyperText Markup Language 超文本标记语言 (2)超文本：在一个网页中除了文本之外的，还包含有视频，图片，音频，超链接，表格，列表等。 标记语言：指标签组合而成的语言<> 浏览器可以识别的只有html语言 网页的后缀名: .html和.h...
设计网页界面， 在JavaScript脚本中DOM控制HTML表单及表单元素
m0_61684063的博客
04-12 1044
设计网页界面， 在JavaScript脚本中DOM控制HTML表单及表单元素实验目的 （包含Document对象、document对象的属性、document对象的常用方法、DOM Element的常用方法、Form对象）
JavaScript基础案例篇（题目附代码）
qq_66193208的博客
04-20 8334
这篇文章的代码难度循序渐进，从最基础的变量使用开始，慢慢去提升js的兴趣（这里使用的软件是vscode）
javascript的理解及经典案例分析
一如既往的博客
08-19 558
js要学习的内容简介： web前端有三层 JavaScript的组成 JavaScript的特点 JS在网页中输出信息的写法 JS在网页中用户输入的写法 直接量 变量 数据类型 运算符 数据类型转换 流程控制 常用内置函数对象 函数 伪数组arguments 关于DOM的事件操作 DOM操作中“事件三要素“ 定时器 BOM介绍 BOM的常用方法和内置对象 client，offset，scroll系列 JavaScript容易学习吗？特点: 简单易用 解释型语.
列表与超链接
yibashou的博客
07-17 1127
1、无序列表与有序列表 ul   无序列表                            type类型           值的效果   disc     circle  显示的效果 ol  有序列表        2、dl是定义列表 dt  指定的名词        dd  主要就是描述 3、linst - style 复合的属性 list-style ：列表的项目符合  ...
Html标签使用——文字、列表、表格、超链接
YouxiBug
01-28 3053
注：文章来源于传智播客毕向东老师使用课件和网络。 Html内容 1.   Html就是超文本标记语言的简写，是最基础的网页语言。 2.   Html是通过标签来定义的语言，代码都是由标签所组成。 3.   Html代码不用区分大小写。 4.   Html代码由开始结束。里面由头部分和体部分两部分组成。 5.   头部分是给Html页面增加一些辅助或者属性信息，它
从零开始学习HTML、CSS和JavaScript
学习HTML、CSS和JavaScript是Web开发的基础，这三者结合可以创建出功能丰富、视觉吸引的网页。CSS负责样式和布局，JavaScript处理交互和动态功能，而HTML则构建页面的基本结构。从零开始掌握这些技术，将能够构建出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值