javascript交换文本块onclick锚链接答案

【问题标题】：javascript swap text block onclick anchor linkjavascript交换文本块onclick锚链接
【发布时间】：2012-04-16 01:54:00
【问题描述】：

这应该很容易，但它不能正常工作......我对 javascript 很生疏，无法弄清楚我错过了什么。

我有一个导航栏，当人们点击小箭头时，我希望它消失，只留下第二个箭头。当用户单击第二个箭头时，导航栏会重新出现。所有的导航栏都在一个标签中。导航菜单本身很长，原因之一是我想让用户能够打开和关闭它。

head中的Javascript函数如下：

<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 标签大小的背景颜色保持不变。我希望它变成空白，除了小箭头。所以问题 1 是为什么 div 和 span 不起作用，或者 td 在旧空间中留下背景颜色。

第二个问题是如何通过变量在文本中指定innerHTM。不用把这一切都放在头文件中会很好。

感谢您的任何想法！

【问题讨论】：

可以举个例子吗？也许是jsFiddle？
剪切并粘贴到 .txt 文件中并重命名 .htm，你会看到我得到了什么。

标签： javascript text onclick swap

【解决方案1】：

不知道 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>

【讨论】：

当我将链接功能移出要替换的 div 时工作，所以我想使用 div 你不能替换包含要替换的链接的内容。然而，似乎应该有一种方法来进行这种常见的交换，

【解决方案2】：

下面留下一行背景展开 gif。将 gif 移到 div 之外会导致单元格对齐。意识到表格不再被认为是最佳实践，但重做整个网站的表格结构将是一项艰巨的任务。

 <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>

【讨论】：

解决方案！摆脱了展开后的背景颜色，将单个颜色属性从导航栏周围的 div 中取出，而是将 innerhtml 括起来以进行折叠和展开，以及在正文中折叠链接和导航栏，并使用具有自己颜色属性的相应 div，例如obj.innerHTML = "
"，换句话说，分别为每个事物着色。整个事情的诀窍是在 div、span、tds 中正确放置样式标签。等