JavaScript如何操作获取类的子类？

rabbitjerry 2010-08-27 05:58:56

我的意图是，点击任意一个标签时，弹出一个面板，面板的内容跟标签有关联，即不同的标签弹出的内容也不同。但是面板的样式是相同的，因此不想每个面板分别设计一个样式，而是想共用那个样式。
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>2010-08-27</title>

<style type="text/css">

.tab{

	display:none;

	float:left;

	position:absolute;

	left:100px;

	top:100px;

	width:400px;

	margin:0px auto;

	background-color:#cee;

	/*z-index:-5px;*/

}

a{

	display:inline-block;

	margin:5px;

	padding:5px;

	text-decoration:none;

	background-color:#afa;

}

#beijing{}

#tianjin{}

</style>





</head>



<body>

<a href="#" onclick="(getElementById('beijing')).tab.style.display='block'">Beijing </a>

<a href="#" onclick="(getElementById('tianjin')).tab.style.display='block'">Tianjin</a>

<a href="#">Shanghai</a>

<a href="#">Chongqing</a>



<div id="beijing" class="tab">Beijing City Beijing City Beijing City Beijing City</div>

<div id="tianjin" class="tab">Tianjin City Tianjin City Tianjin City Tianjin City</div>



<p>this is a paragraph</p>

<p>this is a paragraph</p>

<p>this is a paragraph</p>

<p>this is a paragraph</p>

<p>this is a paragraph</p>





</body>

</html>

关键是onclick="(getElementById('tianjin')).tab.style.display='block'"这行代码有误吗？想实现获得tianjin这个类后，修改它的子类tab的属性。这样的功能该如何实现呢？
谢谢！！！

...全文

89 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

qimingxuan 2010-08-27

打赏
举报

那你就在div层的右下角加一个关闭的符号，使其onclick事件来隐藏该层的display为none

rabbitjerry 2010-08-27

打赏
举报

我在校内网上搜索好友时，当学校所在地区选择为某个城市时，就弹出一个层，层里列出了该城市的所有大学，该层的右下角有个关闭按钮。我想实现类似的效果。

马老虎 2010-08-27

打赏
举报

onclick="(getElementById('beijing')).tab.style.display='block'"
↓
onclick="(getElementById('beijing')).style.display='block'"





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>2010-08-27</title>

<style type="text/css">

.tab{

    display:none;

    float:left;

    position:absolute;

    left:100px;

    top:100px;

    width:400px;

    margin:0px auto;

    background-color:#cee;

    /*z-index:-5px;*/

}

a{

    display:inline-block;

    margin:5px;

    padding:5px;

    text-decoration:none;

    background-color:#afa;

}

#beijing{}

#tianjin{}

</style>





</head>



<body>

<a href="#" onclick="(getElementById('beijing')).style.display='block'">Beijing </a>

<a href="#" onclick="(getElementById('tianjin')).style.display='block'">Tianjin</a>

<a href="#">Shanghai</a>

<a href="#">Chongqing</a>



<div id="beijing" class="tab">Beijing City Beijing City Beijing City Beijing City</div>

<div id="tianjin" class="tab">Tianjin City Tianjin City Tianjin City Tianjin City</div>



<p>this is a paragraph</p>

<p>this is a paragraph</p>

<p>this is a paragraph</p>

<p>this is a paragraph</p>

<p>this is a paragraph</p>





</body>

</html>