通过多个<a>标签
Toggle div through multiple <a> tag
我能够通过一个js函数进行切换,该函数使用href id来匹配要切换的相应div或td。
但我的目标是能够用页面底部的另一个href来切换div/td。此href包含相同的id和名称。
这里有一个例子:jsfiddle(切换功能在我的远程服务器中有效,但在jsfiddler中却不起作用)
<script type="text/javascript">
function showonlyonev2(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes-2') {
if (newboxes[x].id == thechosenone) {
if (newboxes[x].style.display == 'block') {
newboxes[x].style.display = 'none';
}
else {
newboxes[x].style.display = 'block';
}
}else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader1-2" href="javascript:showonlyonev2('newboxes1-2');" >toggle</a>
</div>
<div name="newboxes-2" id="newboxes1-2" name="div1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader2-2" href="javascript:showonlyonev2('newboxes2-2');" >toggle</a>
</div>
<div name="newboxes-2" id="newboxes2-2" name="div2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader3-2" href="javascript:showonlyonev2('newboxes3-2');" >toggle</a>
</div>
<div name="newboxes-2" id="newboxes3-2" name="div3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
</td>
</tr>
</table>
<div style="padding-top:20px;">
<a id="myHeader1-2" name="div1" href="javascript:showonlyonev2('newboxes1-2');">See Div #1</a>
</div>
<div style="padding-top:20px;">
<a id="myHeader2-2" name="div2" href="javascript:showonlyonev2('newboxes2-2');">See Div #2</a>
</div>
<div style="padding-top:20px;">
<a id="myHeader3-2" name="div3" href="javascript:showonlyonev2('newboxes3-2');">See Div #3</a>
</div>
在div上有"name"属性是不常见的。
顶部表格中的div每个都有2个"name"属性。
我会把它清理干净然后再试一次。
相关文章:
- 在<页眉>标签
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- </脚本>标签放错地方了
- Jquery在点击<a>标签
- Ionic V1.3-标签-带条件的徽章样式<离子选项卡>
- <选择>标签不起作用
- 如何在<嵌入>标签在Plone 4.1中
- 在<script src=“"></脚本>标签
- 使用几个<脚本>标签不会't工作-只调用一个脚本
- 如何在更新面板内部调用/触发javascript函数<触发器>标签
- react-让一个元素返回两个相邻的<tr>标签
- <h1>标签在离子含量元素中不可见
- VS代码:在<脚本>标签
- 在</表单>标签
- Meteor.js:<脚本>标签不't在<身体>
- Highlight.js为每个<代码>标签
- 聚合物-如何从<a>标签
- 当通过<a>标签,它无法正确加载
- HTML上的Webpack JSX错误<来源>标签
- 如何使角度显示为空<p>标签