将多个id传递给JS函数
Pass multiple ID's to JS function
我在这段代码中的目标是在单击链接时显示特定的div标记并隐藏所有其他div标记。我一直在用不同的方法重写它,但似乎不能使它正常工作。
JavaScript下面……
function show(id1, id2, id3, id4)
{
document.getElementById(id1).style.visibility="visible";
document.getElementById(id2).style.visibility="hidden";
document.getElementById(id3).style.visibility="hidden";
document.getElementById(id4).style.visibility="hidden";
}
HTML下面……
<a href='#home' onclick="show('home', 'info', 'payment', 'contact')">Home</a>
<a href='#info' onclick="show('info', 'home','payment','contact')">Information</a>
<a href='#payment' onclick="show('payment', 'info', 'home','contact')">Payment</a>
<a href='#contact' onclick="show('contact', 'info', 'payment','home')">Contact</a>
<div id="home">Content</div>
<div id="info">Content</div>
<div id="payment">Content</div>
<div id="content">Content</div>
您的代码不能正常工作,因为您在函数中传递contact
而不是content
。
考虑使用display:none
而不是visibility
,因为如果你使用visibility
,你的内容将被隐藏,但它将在后面留下一个空间:
function show(id1, id2, id3, id4)
{
document.getElementById(id1).style.display="block";
document.getElementById(id2).style.display="none";
document.getElementById(id3).style.display="none";
document.getElementById(id4).style.display="none";
}
<a href='#home' onclick="show('home', 'info', 'payment', 'contact')">Home</a>
<a href='#info' onclick="show('info', 'home','payment','contact')">Information</a>
<a href='#payment' onclick="show('payment', 'info', 'home','contact')">Payment</a>
<a href='#contact' onclick="show('contact', 'info', 'payment','home')">Contact</a>
<div id="home">Home Content</div>
<div id="info">Info Content</div>
<div id="payment">Pay Content</div>
<div id="contact">Con Content</div>
如果这是你的html:
<div id="home" class="singleVisible" onclick="disableOthers(this)">Content #1</div>
<div id="info" class="singleVisible" onclick="disableOthers(this)">Content #2</div>
<div id="payment" class="singleVisible" onclick="disableOthers(this)">Content #3</div>
<div id="content" class="singleVisible" onclick="disableOthers(this)">Content #4</div>
那么这可以是你的脚本:
function disableOthers(e) {
var all = document.getElementsByClassName('singleVisible');
for(var i = 0; i < all.length; i++) {
// First make all of the elements with the same class hidden.
if (all[i] !== this) {
all[i].style.visibility = 'hidden';
}
// Then make the clicked element visible.
e.style.visibility = 'visible';
}
}
虽然我觉得人们学习JavaScript很重要,但这是jQuery真正能帮助的事情。上面的"onclick"属性出于多种原因不推荐使用,但如果你想要删除这些属性,并用JavaScript中的实际事件处理程序调用来替换它们,那么你也可能想要确保你支持较旧的(IE8,而不是那么旧)浏览器。看看这个:
http://www.anujgakhar.com/2013/05/22/cross-browser-event-handling-in-javascript/在任何情况下,JQuery版本都很简单,只需删除这些onclick属性并使用以下脚本即可:
<div id="home" class="singleVisible">Content #1</div>
<div id="info" class="singleVisible">Content #2</div>
<div id="payment" class="singleVisible">Content #3</div>
<div id="content" class="singleVisible">Content #4</div>
<script>
$('.singleVisible').click(function() {
$('.singleVisible').hide();
$(this).show();
});
</script>
另外,请注意,最佳实践(如果可以的话)是有一个父容器,并将事件附加到该容器。否则,在我给出的两个示例中,您将在每种情况下附加四个事件处理程序。它就像在父div中包装链接一样简单,并做如下操作:
<div id="parent">
<div id="home" class="singleVisible">Content #1</div>
<div id="info" class="singleVisible">Content #2</div>
<div id="payment" class="singleVisible">Content #3</div>
<div id="content" class="singleVisible">Content #4</div>
</div>
<script>
$('#parent').on('click', '.singleVisible', function() {
$('.singleVisible').hide();
$(this).show();
});
</script>
玩得开心!div =)
给所有div元素一个类。点击:
使用
隐藏它们getElementsByClassName
- 通过id 使div可见
相关文章:
- 当js函数's已执行
- 调用php数组中的JS函数
- 为JS函数添加延迟
- 我如何制作一个JS函数,它可以从相似的原始颜色双向更改为某个颜色
- 使用JS函数来使用另一个函数的语法?node.js
- 将JS函数传递给Emscripten生成的代码
- 是否可以在使用headerphp函数后自动调用JS函数
- 如何在.js函数中检索来自其他模板的表单的目标值
- 简单的JS函数.需要对变量进行澄清
- 无法识别从php创建的Js函数
- 如何将对象传递给这个js函数
- 全局窗口热键在最小化chrome窗口时调用js函数
- 将重定向URL链接添加到JS函数
- 从PHP调用JS函数不起作用
- js函数堆栈传入变量,.hide()不起作用
- 当运行JS函数时,如何在c#中的Edgejs中获取错误文本
- 如何让JS函数自行执行
- 使用默认js函数的javascript中的日期的第二天
- 如何从页面中的jquery调用angular js函数控制器
- 从.js文件调用html中的js函数