我在互联网上找到了一个显示和隐藏代码片段的脚本:
function show(shown, hidden,) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
<a href="#" onclick="return show('Page1','Page2');">Page 1</a>
<a href="#" onclick="return show('Page2','Page1');">Page 2</a>
我的问题是,如何更改此内容以包含更多页面?
我能找到的唯一方法就是:
function show(shown, hidden1, hidden2, hidden3) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden1).style.display='none';
document.getElementById(hidden2).style.display='none';
document.getElementById(hidden3).style.display='none';
return false;
}
<a href="" onclick="return show('Page1','Page2','Page3','Page4' );">Page 1</a>
<a href="" onclick="return show('Page2','Page1','Page3','Page4' );">Page 2</a>
<a href="" onclick="return show('Page3','Page1','Page2','Page4' );">Page 3</a>
<a href="" onclick="return show('Page4','Page1','Page2','Page3' );">Page 4</a>
......但似乎有点乱。那么有没有办法将3个页面一次性传递到脚本中的“隐藏”参数?
谢谢!
答案 0 :(得分:2)
您可以将数组作为hidden
参数传递。然后你必须像这样修改你的JS:
function show(shown, hidden ) {
document.getElementById(shown).style.display='block';
for( var i=hidden.length; i--; ) {
document.getElementById(hidden[i]).style.display='none';
}
return false;
}
并且HTML看起来像这样:
<a href="" onclick="return show('Page1', ['Page2','Page3','Page4'] );">Page 1</a>
作为替代方案,您可以使用类而不是设置样式。然后你可以将hidden
参数全部放在一起:
function show( shown ) {
// remove class 'shownPage' everywhere
var els = document.querySelectorAll( '.shownPage' );
for( var i=els.length; i--; ) {
els.classList.remove( 'shownPage' );
}
// and just add it to the page to show
document.getElementById(shown).classList.add( 'shownPage' );
return false;
}
答案 1 :(得分:1)
您可以将数组作为第二个参数传递,或者甚至使用已存在的arguments
数组,如object:
function show() {
document.getElementById(arguments[0]).style.display='block';
for(var i=1; i<arguments.length; i++){
document.getElementById(arguments[i]).style.display='none';
}
}
使用此代码,第一个参数是id,表示所有其他参数都是要隐藏的id。
答案 2 :(得分:0)
您可以使用arguments
,按Sirko的建议传递数组,对象或使用选择所有节点的方法(例如一个类),然后只显示您想要的节点
// arguments
function show() {
var i = arguments.length;
if (i > 0) {
while (--i) document.getElementById(arguments[i]).style.display = 'none';
document.getElementById(arguments[0]).style.display = 'block';
}
}
// show('vis_id_1', 'hid_id_1', 'hid_id_2',...)
// object
function show(obj) {
var id;
for (id in obj) {
if (obj.hasOwnProperty(id)) { // safety filter
document.getElementById(id).style.display = obj[id];
}
}
}
// show({'vis_id_1':'block', 'hid_id_1':'none'});