javascript 交换文本块 onclick 锚链接
[英]javascript swap text block onclick anchor link
问题描述
这应该很容易，但它不能正常工作......我对 javascript 很生疏，无法弄清楚我错过了什么。
我有一个导航栏，我想在人们点击小箭头时消失，只留下第二个箭头。 当用户点击第二个箭头时，导航栏重新出现。 所有的导航栏都在一个标签中。 导航菜单本身很长，其中一个原因是，我想让用户能够打开和关闭它。
head中的Javascript function如下：
<script type="text/javascript">
function collapseMenu()
{document.getElementById("navbar").innerHTML ='<td id=navbar2><a href="javascript:void(0)" onclick="collapseMenu('navbar2');"><img src="arrow.gif"></a></td>';
}</script>
页面上的文字是：
<div id='navbar'>
<td>
<a href="javascript:void(0)" onclick="collapseMenu('navbar');"><img src="arrow.gif"></a>
</td>
</div>
将 id 放在 div 标签中，当您单击链接时它会显示箭头，但不会删除 div 标签之间的旧 html。 使用 span 而不是 div 也是一样，单引号和双引号之间没有区别。 当我将 id="navbar" 移动到标签时，导航栏确实消失了，但它保留了旧 td 标签大小的背景颜色不变。 除了小箭头外，我希望它为 go 空白。 所以问题 1 是为什么 div 和 span 不起作用，或者为什么 td 在旧空间中留下背景颜色。
第二个问题是如何通过变量在文本中指定 innerHTM。 如果不必将所有这些都放在 header 中的 function 中就好了。
感谢您的任何想法！
2 个解决方案
解决方案1
0 2012-04-09 11:59:38
不知道 jsfiddle 是什么，但如果将以下代码放入 .htm 文件，则会重现问题。 谢谢。
<html>
<head>
<script type="text/javascript">
function hideBar()
{document.getElementById("navbar").innerHTML ='<td>show navbar</td>';
}</script>
<script type="text/javascript">
function hideBar2()
{document.getElementById("navbar2").innerHTML ='<td>show navbar</td>';
}</script>
</head>
<body>
<table width=500>
id in td tag
<tr>
<td rowspan=3 bgcolor="yellow" id="navbar">
<a href="javascript:void(0)" onclick="hideBar('navbar');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
<table width=500>
id in div tag
<tr>
<div id="navbar2">
<td rowspan=3 bgcolor="yellow">
<a href="javascript:void(0)" onclick="hideBar2('navbar2');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td></div>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
</body>
</html>
解决方案2
0 2012-04-15 16:57:19
下面留下一行背景展开 gif。 将 gif 移到 div 之外会抛出单元格 alignment。意识到表格不再被认为是最佳实践，但重做整个站点的表格结构将是一项艰巨的任务。
<html>
<head>
<script type="text/javascript">
function toggleBar(obj) {
var navbar = document.getElementById("navbar");
if (navbar.style.display == "none") {
navbar.style.display = "";
obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>";
} else {
navbar.style.display = "none";
obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'>";
}
}
</script>
</head>
<body>
<body><table><tr><td valign="top">
<div style="background-color:lightgrey;text-align:left;padding-left:4px;width:80px;">
<a href="javascript:void(0)" onclick="toggleBar(this);"><img src="images/collapse.gif"
alt="Hide Menu"></a>
<div id="navbar">menu1<br>menu2<br>menu3<br>menu4</div>
</div>
<td valign="top"><table><tr style="background-color:blue;"><td><font
color="white">Title</font></td></tr>
<tr><td>Body Text</td></tr></table>
</body>
Javascript onclick链接文本更改
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.