JavaScript 交换文本块单击锚链接
javascript swap text block onclick anchor link
这应该很容易,但它不能正常工作... 我对javascript很生疏,无法弄清楚我错过了什么。
我有一个导航栏,当人们单击小箭头时,我想消失,只留下第二个箭头。 当用户单击第二个箭头时,导航栏将重新出现。 所有导航栏都在一个标记中。 导航菜单本身很长,其中一个原因是,我想让用户能够打开和关闭它。
头部的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 在旧空间中留下背景色。
第二个问题是如何通过变量在文本中指定内部HTM。 不必将这一切放在标题中的功能中会很好。
感谢您的任何想法!
不知道 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>
接下来留下一行背景展开 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>
相关文章:
- 当链接单击-jQuery时,第二层下拉列表将隐藏
- 在聊天窗口中检测链接单击事件
- 超链接单击以加载新页面并执行JavaScript
- 超链接单击未启动
- 取消绑定 e.prevent默认 从另一个函数转发到链接单击
- 在链接单击时执行客户端脚本
- 链接单击事件不起作用
- 为什么我在链接单击时进行 jquery/ajax 调用时无法获取值
- 为什么第二个链接单击重定向到部分不是对话框
- 如何在编辑链接单击时首次加载页面时保留值
- 禁用链接单击,直到页面加载完毕
- 记录链接单击,然后保存到本地存储
- 通过动态超链接单击事件的调用方法传递对象或字符串
- 对链接单击后出现的隐藏信息进行刮擦解析
- 使用 jquery 根据链接单击切换 DIV 可见性
- Javascript文本链接单击以选择下拉选项值(onChange?
- 在链接单击上创建一个对话框,javascript第2部分
- javascript中的递归循环,基于链接单击的增量
- 在链接单击事件上返回true是't工作
- 链接单击上的Javascript和Jquery无冲突功能