JavaScript:在同一页面上的所有href上调用切换功能

时间:2015-02-03 19:49:37

标签: javascript jquery html

我有一个帮助页面,其中有一堆javascript切换来显示或隐藏该主题的帮助。有没有办法将它们全部切换为全部显示或全部隐藏?

<a href="javascript:toggle('roles');">Roles or Account Permissions</a>
    <div id="roles" style="display:none">

<a href="javascript:toggle('tracks');">Tracks and Activities</a>
    <div id="tracks" style="display:none">

<a href="javascript:toggle('password');">Modifying Password</a>
    <div id="password" style="display:none">

喜欢也许

<a href="javascript:toggle('roles', 'tracks', 'password');">Toggle all</a>

这是我的javascript

function toggle(divId) {
"use strict";
var div = document.getElementById(divId);
if (div.style.display === "none") {
    div.style.display = "block";
} else {
    div.style.display = "none";
}

}

2 个答案:

答案 0 :(得分:3)

你有jQuery标签,所以听起来你正在使用jQuery?

为每个A标签添加一个类名:

<a href="javascript:$('a.className').toggle();">toggle</a>

无需切换代码。

答案 1 :(得分:1)

使用arguments集合循环使用所有ID:

function toggle() {
    "use strict";
    [].slice.call(arguments).forEach(function(divId) {
        var div = document.getElementById(divId);
        if (div.style.display === "none") {
            div.style.display = "block";
        } else {
            div.style.display = "none";
        } 
    });
}

为方便起见,我将arguments转换为纯数组(使用Array.prototype.forEach方法),当然也可以使用简单的for循环。

查看下面的演示。

&#13;
&#13;
function toggle() {
    "use strict";
    [].slice.call(arguments).forEach(function(divId) {
        var div = document.getElementById(divId);
        if (div.style.display === "none") {
            div.style.display = "block";
        } else {
            div.style.display = "none";
        } 
    });
}
&#13;
a {display: block;}
&#13;
<a href="javascript:toggle('roles');">Roles or Account Permissions</a>
<div id="roles" style="display:none">Roles</div>
    
<a href="javascript:toggle('tracks');">Tracks and Activities</a>
<div id="tracks" style="display:none">Tracks</div>
        
<a href="javascript:toggle('password');">Modifying Password</a>
<div id="password" style="display:none">Modifying Password</div>

<a href="javascript:toggle('roles', 'tracks', 'password');">Toggle all</a>
&#13;
&#13;
&#13;