更改显示/隐藏Javascript的标题标签

时间:2012-03-05 08:20:50

标签: javascript show-hide

http://jsfiddle.net/YaMhn/8/

^^^^看看你是否可以帮忙解决这个问题

好的,所以我将标签showhide添加到我的脚本

function showHide(lbl)
{
if(document.getElementById('mydiv').style.display == "none")
{
    lbl.innerHTML="Hide";
    document.getElementById('mydiv').style.display="";
}
else
{
    lbl.innerHTML="Show";
    document.getElementById('mydiv').style.display="none";
}
}

function showhide(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "none";
} else {
  obj.style.display = "";
}
  }
}

function hide(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "none") {
  obj.style.display = "none";
} else {
  obj.style.display = "none";
}
  }
}

function hideall(id1,id2,id3,id4) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display; 
  if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
hide(id1);  hide(id2); hide(id3); hide(id4); return;
  }
  if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
hide(id1);  hide(id2); hide(id3); hide(id4); return;
  }
}

function show(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "";
} else {
  obj.style.display = "";
}
  }
}

function showall(id1,id2,id3, id4) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display;
  if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
show(id1);  show(id2); show(id3); show(id4); return;
  }
  if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
show(id1);  show(id2); show(id3); show(id4); return;
  }
}

这是我的标题代码:

Header #1: (titled Runway Information    Click to Expand/Close)
<div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id1'); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong>&nbsp;Runway Information</strong></font></td><td align=right><div id='mydiv' style='display:none'></div></td></tr></table></div>

Header完美地工作,显示和隐藏就像我编码一样。但我想隐藏时说“显示”,显示时说“隐藏”。

以前写的是这样的:      单击以展开/关闭

问题是新的showHide(lbl)无法正常工作。

我需要改变什么?

3 个答案:

答案 0 :(得分:2)

很简单 - 使用innerHTML

style.display="block"
innerHTML="click here to expand"

并隐藏:

style.display="hide"
innerHTML="click here to close"

答案 1 :(得分:1)

我做出的唯一改变是,否则,如果现在已经修复了。

http://jsfiddle.net/YaMhn/18/

谢谢Ashraf的帮助。我会赞成你,但我只有13个代表。

答案 2 :(得分:0)

我举了一个例子:http://jsfiddle.net/YaMhn/