您的位置：首页 > Web前端 > JavaScript

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

2012-12-14 17:31 836 查看
二．表格、列表和链接的结合使用，实现的功能是将数据进行表格的格式化，在表格的每一项中有一个链接，点击链接有两种效果：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)"  onclick="list()">好友菜单列表</a>
<div>
大家看到<br />
大家看到<br />
大家看到<br />
大家看到<br />
大家看到<br />
</div>
</td>
</tr>

<tr>
<td>
<a href="javascript:void(0)"   onclick="list()">好友菜单列表</a>
<div>
大家看到<br />
大家看到<br />
大家看到<br />
大家看到<br />
大家看到<br />
</div>
</td>
</tr>

<tr>
<td>
<a href="javascript:void(0)"   onclick="list()">好友菜单列表</a>
<div>
大家看到<br />
大家看到<br />
大家看到<br />
大家看到<br />
大家看到<br />
</div>
</td>
</tr>

<tr>
<td>
<a href="javascript:void(0)"  onclick="list()">好友菜单列表</a>
<div>
大家看到<br />
大家看到<br />
大家看到<br />
大家看到<br />
大家看到<br />
</div>
</td>
</tr>

<tr>
<td>
<a href="javascript:void(0)"  onclick="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的区别，
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航