javascript 实现显示隐藏功能,要通用

Cyril_Tam 2010-04-02 04:08:12
<table id="table1">
<tr>
<td><a href="#">主题一</a></td>
</tr>
<tr id="trSub1" style="display:none">
<td>主题一详细内容</td>
</tr>
<tr>
<td><a href="#">主题二</a></td>
</tr>
<tr id="trSub2" style="display:none">
<td>主题二详细内容</td>
</tr>
<tr>
<td><a href="#">主题三</a></td>
</tr>
<tr id="trSub3" style="display:none">
<td>主题三详细内容</td>
</tr>
</table>

如上面一段html,初始状态下只显示"主题一","主题二","主题三" 这三行, 要求:
1.点击"主题一"时,显示id="trSub1"这个tr. 再次点击则隐藏.
2.点击哪个主题,就显示哪个主题的详细内容,其它详细内容隐藏.
3.主题的数量是不定的,可能三个,也可能三十个.所以不能写死.

用javascript如何实现? 谢谢
...全文
285 22 打赏 收藏 转发到动态 举报
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
郭大侠_ 2010-04-02
  • 打赏
  • 举报
 回复
下班走的急，还有点小问题回家解决了，送上完美版！
<!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>

    <title>无标题页</title>

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

    <style type="text/css">

        

    </style>

    

<script type="text/javascript">

    window.onload = function()

    {

        var tbl = document.getElementById("table1");

        var r = 0;

        var obj = tbl.getElementsByTagName("a");

        for (var i = 0; i < obj.length; i++)

        {

            obj[i].onclick = function()

            {   

                var o = this.parentNode.parentNode.nextSibling;

                if (!window.event)

                {

                    do { o = o.nextSibling; } while (o.nodeType != 1)

                }

                o.style.display = (o.style.display == "block") ? "none" : "block"

				for (var j = 1; j < document.getElementById("table1").rows.length; j =j+ 2)

                {

					if (document.getElementById("table1").rows[j] !=o)

					{

						document.getElementById("table1").rows[j].style.display = "none";

					}

                }

            }

        }

    }

    

</script>

</head>

<body >







<table id="table1">

  <tr>

    <td><a href="#">主题一</a></td>

  </tr>

  <tr style="display:none">

    <td>主题一详细内容</td>

  </tr>

  <tr>

    <td><a href="#">主题二</a></td>

  </tr>

  <tr style="display:none">

    <td>主题二详细内容</td>

  </tr>

  <tr>

    <td><a href="#">主题三</a></td>

  </tr>

  <tr style="display:none">

    <td>主题三详细内容</td>

  </tr>

</table>





</body>

</html>
打字员 2010-04-02
  • 打赏
  • 举报
 回复 


<!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>无标题文档</title>

<script type="text/javascript">

		var showInfo = function(id) {

			var _table = document.getElementById(id);

			var _tr = _table.rows;

			var _len = _tr.length;	

			var _self = this;								

			this.content = [];

			for(var i = 0; i< _len; i++) {

				if((i % 2) == 0) {

					(function(){

						var _i = i;

						_tr[i].getElementsByTagName('a')[0].onclick = function(){_self.show(_i / 2)};

					})();

				} else {

					this.content.push(_tr[i]);

				}

			}

		}	

		showInfo.prototype = {

			show: function(n) {

				var _len = this.content.length;

				for(var i = 0; i < _len; i++){

					if(i == n) {

						this.content[i].style.display = (this.content[i].style.display == 'block') ? 'none' : 'block';

					} else {

						this.content[i].style.display = 'none';

					}

				}

			}

		}

	</script>

</head>

<body>

<table id="table1">

	<tr>

		<td><a href="#">主题一</a></td>

	</tr>

	<tr id="trSub1" style="display:none">

		<td>主题一详细内容</td>

	</tr>

	<tr>

		<td><a href="#">主题二</a></td>

	</tr>

	<tr id="trSub2" style="display:none">

		<td>主题二详细内容</td>

	</tr>

	<tr>

		<td><a href="#">主题三</a></td>

	</tr>

	<tr id="trSub3" style="display:none">

		<td>主题三详细内容</td>

	</tr>

</table>

<script type="text/javascript">

	new showInfo('table1');

</script>

</body>

</html>
真哥哥 2010-04-02
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 cyril_tam 的回复:]
引用 14 楼 haiyong_sea 的回复:

搞错了：
if (pre != id) {//应该是不等于才对
document.getElementById(id).style.display = "";
pre = id;
}


只能不同主题互相切换，不能同一主题显示或隐藏。
[/Quote]

又搞错了：
if (pre != id) {//应该是不等于才对
document.getElementById(id).style.display = "";
pre = id;
}else{//回到默认值
pre="";
}
真哥哥 2010-04-02
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 cyril_tam 的回复:]
引用 14 楼 haiyong_sea 的回复:

搞错了：
if (pre != id) {//应该是不等于才对
document.getElementById(id).style.display = "";
pre = id;
}


只能不同主题互相切换，不能同一主题显示或隐藏。
[/Quote]

又搞错了：
if (pre != id) {//应该是不等于才对
document.getElementById(id).style.display = "";
pre = id;
}else{//回到默认值
pre="";
}
blueweiwei 2010-04-02
  • 打赏
  • 举报
 回复
一气之下自己写了个,兼容所有浏览器:
<!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>无标题文档</title>
</head>

<body>
<table id="table1">
<tr>
<td><a href="#">主题一</a></td>
</tr>
<tr id="trSub1" style="display:none"><td>主题一详细内容</td>
</tr>
<tr>
<td><a href="#">主题二</a></td>
</tr>
<tr id="trSub2" style="display:none">
<td>主题二详细内容</td>
</tr>
<tr>
<td><a href="#">主题三</a></td>
</tr>
<tr id="trSub3" style="display:none">
<td>主题三详细内容</td>
</tr>
</table>
</body>
<script language="javascript">
var a=document.getElementById("table1").getElementsByTagName("a");
var current;
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
var nextNode=this.parentNode.parentNode;
getNextSibling(nextNode).style.display=(getNextSibling(nextNode).style.display=="block")?"none":"block";
if(current)
{
getNextSibling(current).style.display="none";
}
current=nextNode.nextSibling;
return false;
}
}
function getNextSibling(node){
var nextNode;
if(node.nextSibling.nodeType!=1)
nextNode=node.nextSibling.nextSibling;
else{
nextNode=node.nextSibling;
}
return nextNode
}
</script>
</html>
因为有些浏览器把换行也当成一个节点(#text),所以用getNextSibling这个函数来去除#text
郭大侠_ 2010-04-02
  • 打赏
  • 举报
 回复
可以结贴了：
<!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>

    <title>无标题页</title>

    <style type="text/css">

        

    </style>

    

<script type="text/javascript">

    window.onload = function()

    {

        var tbl = document.getElementById("table1");

        var r = 0;

        var obj = tbl.getElementsByTagName("a");

        for (var i = 0; i < obj.length; i++)

        {

            obj[i].onclick = function()

            {

                for (var j = 1; j < document.getElementById("table1").rows.length; j =j+ 2)

                {

                    document.getElementById("table1").rows[j].style.display = "none";

                }

                

                var o = this.parentNode.parentNode.nextSibling;

                if (!window.event)

                {

                    do { o = o.nextSibling; } while (o.nodeType != 1)

                }



                o.style.display = (o.style.display == "block") ? "none" : "block"



            }

        }

    }

    

</script>

</head>

<body >







<table id="table1">

  <tr>

    <td><a href="#">主题一</a></td>

  </tr>

  <tr style="display:none">

    <td>主题一详细内容</td>

  </tr>

  <tr>

    <td><a href="#">主题二</a></td>

  </tr>

  <tr style="display:none">

    <td>主题二详细内容</td>

  </tr>

  <tr>

    <td><a href="#">主题三</a></td>

  </tr>

  <tr style="display:none">

    <td>主题三详细内容</td>

  </tr>

</table>





</body>

</html>
Cyril_Tam 2010-04-02
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 haiyong_sea 的回复:]

搞错了：
if (pre != id) {//应该是不等于才对
document.getElementById(id).style.display = "";
pre = id;
}
[/Quote]

只能不同主题互相切换，不能同一主题显示或隐藏。
Cyril_Tam 2010-04-02
  • 打赏
  • 举报
 回复
三楼朋友shan1119挺好的，可惜就是同一主题只能点击一次来回，继续点击就没反应了，能否改进一下，谢谢
真哥哥 2010-04-02
  • 打赏
  • 举报
 回复
搞错了：
if (pre != id) {//应该是不等于才对
document.getElementById(id).style.display = "";
pre = id;
}
Cyril_Tam 2010-04-02
  • 打赏
  • 举报
 回复
不行呀，一点反应都没有噢~~
戒持和尚 2010-04-02
  • 打赏
  • 举报
 回复
var tbl=document.getElementById("table1");
var tr=tbl.getElementByTagName("tr");
var a=tbl.getElementByTagName("a");
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
var obj=tr[i+1];
obj.style.display=(obj.style.display=="block")?"none":"block";
}
}
真哥哥 2010-04-02
  • 打赏
  • 举报
 回复
<table id="table1">
<tr>
<td><a href="javascript:void(0)" onclick="showList('trSub1')">主题一</a></td>
</tr>
<tr id="trSub1" style="display:none">
<td>主题一详细内容</td>
</tr>
<tr>
<td><a href="javascript:void(0)" onclick="showList('trSub2')">主题二</a></td>
</tr>
<tr id="trSub2" style="display:none">
<td>主题二详细内容</td>
</tr>
<tr>
<td><a href="javascript:void(0)" onclick="showList('trSub3')">主题三</a></td>
</tr>
<tr id="trSub3" style="display:none">
<td>主题三详细内容</td>
</tr>
</table>
<script type="text/javascript">
/*总数,id相同部分,当前第几个*/
function showList(id) {
var pre = "";
for (i = 1; i <= count; i++) {//count是多少<td>
var ele = document.getElementById("trSub" + i);
ele.style.display = "none";
}
if (pre == id) {
document.getElementById(id).style.display = "";
pre = id;
}
}
</script>
suland 2010-04-02
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 suland 的回复:]
用jQuery也能实现：
<script type="text/javascript">
$(document).ready( function() {
var hide = $('tr:hidden');
var as = $('a');
as.click( function() {
var a = $(this);
hide.hide();
a.parent().parent(……
[/Quote]
抱歉，未测完就发上来了，有点问题。
Cyril_Tam 2010-04-02
  • 打赏
  • 举报
 回复
二楼的方法虽然可以实现第二点，但是万一有一百个主题的话，那就恐怖了。

showList(3,'trSub',3)要改一百次。


还是先谢谢各位。

能改进一下吗
Cyril_Tam 2010-04-02
  • 打赏
  • 举报
 回复
回7楼， 能否用javascript来实现？
passself 2010-04-02
  • 打赏
  • 举报
 回复
jquery:


$(".test").click(function(){

	     $(this).parent().hide();

		 $(this).parent().next().show();

	});

	for(var i=1;i<4;i++){

	     var id = "#trSub" +i;

		 $(id).click(function(){

		     $(this).hide();

			 $(this).prev().show();

		 });

	}

html:


<table id="table1">

  <tr>

  	 <td class="test"><a href="#">主题一</a></td>

  </tr>

  <tr id="trSub1" style="display:none">

  	 <td>主题一详细内容</td>

  </tr>

  <tr>

  	<td class="test"><a href="#">主题二</a></td>

  </tr>

  <tr id="trSub2" style="display:none">

  	<td>主题二详细内容</td>

  </tr>

  <tr>

  	<td class="test"><a href="#">主题三</a></td>

  </tr>

  <tr id="trSub3" style="display:none">

  <td>主题三详细内容</td>

  </tr>

</table>
Cyril_Tam 2010-04-02
  • 打赏
  • 举报
 回复
一楼的方法不行，执行不了。

二楼的方法可以实现第二点，但第一点不行。

三楼的方法点第一次可以实现，但后面的就不行了。比如点一下主题一，可以显示，再点一次，可以隐藏，但再点一次的话就没反应了。而且好像只有IE能用
suland 2010-04-02
  • 打赏
  • 举报
 回复
用jQuery也能实现：
<script type="text/javascript">
$(document).ready( function() {
var hide = $('tr:hidden');
var as = $('a');
as.click( function() {
var a = $(this);
hide.hide();
a.parent().parent().next().toggle();
});
});
</script>
shan1119 2010-04-02
  • 打赏
  • 举报
 回复
改：


<script>

var curr;

var tbl=document.getElementById("table1");

var a=tbl.getElementsByTagName("a");

for(var i=0;i<a.length;i++){

    a[i].onclick=function(){

        var obj=this.parentNode.parentNode.nextSibling;

        obj.style.display=(obj.style.display=="block")?"none":"block";

        if(curr)curr.style.display="none";

        curr=obj;

    }

}

</script>
shan1119 2010-04-02
  • 打赏
  • 举报
 回复 
<table id="table1">

  <tr>

  <td><a href="#">主题一</a></td>

  </tr>

  <tr id="trSub1" style="display:none">

  <td>主题一详细内容</td>

  </tr>

  <tr>

  <td><a href="#">主题二</a></td>

  </tr>

  <tr id="trSub2" style="display:none">

  <td>主题二详细内容</td>

  </tr>

  <tr>

  <td><a href="#">主题三</a></td>

  </tr>

  <tr id="trSub3" style="display:none">

  <td>主题三详细内容</td>

  </tr>

</table>

<script>

var tbl=document.getElementById("table1");

var a=tbl.getElementsByTagName("a");

for(var i=0;i<a.length;i++){

    a[i].onclick=function(){

        var obj=this.parentNode.parentNode.nextSibling;

        obj.style.display=(obj.style.display=="block")?"none":"block"

    }

}

</script>
加载更多回复（2）
vue基于 input 实现密码的显示与隐藏功能
前言： 大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们... 代码讲解： 使用Color的true或false判断显示图标的样式，input框则使用Type的样式进行显示，@click="Show"点击修改密码的显示或者隐藏
html点击显示隐藏判断,javascript如何判断div是否隐藏？
JavaScript中判断div是否隐藏的方法：第一种：使用CSS属性代码如下:var display =$('#id').css('display');if(display == 'none'){alert("被你发现了，我是隐藏的啦！");}第二种：调用jquery判断是否隐藏a...
javaScript easyUI实现 图片预览功能（鼠标移动到图片上 显示大图在旁边）
 因此博主想实现这样一个功能，就是当鼠标移动到图片上时，旁边就会出现这个图片的稍大的图，这样就可以让图片的细节被看到。说干就干。  存在的问题： （1）需要一个容器来放预览图 （2）这个预览图的位置是...
js实现显示与隐藏
总结如下：1.jQuery中隐藏元素的hide方法 让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery...
JavaScript 实现页面滚动动画
我们先使用 HTML 创建页面布局，然后为需要实现动画的元素分配一个通用类名，后面JavaScript 通过此类名定位这些元素。这里我们给需要根据滚动实现动画的元素指定为类名 js-scroll HTML代码如下： <div class=...
JavaScript

87,915

社区成员

224,619

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章