使用javascript或jquery隐藏或显示面板 [英] Hide or show panel using javascript or jquery
问题描述
大家好，
我在页面上有3个链接按钮和3个分区标签。
我必须一次显示一个div。
我的意思是当我点击第一个链接然后只显示第一个div并且剩下2个div标签将隐藏。
当我点击第二个链接时，将显示第二个div并且应该隐藏休息。
以下是我的Javascript函数： -
Hi All,
I have 3 link buttons and 3 division tags on page.
I have to show one div at a time.
I mean when i click on 1st link then only 1st div should be displayed and rests 2 div tags will get hidden.
When i click on 2nd link then 2nd div will get displayed and rests should be hidden.
Below is my Javascript function :-
function ShowOrHidePanel(div_id)
{
$("#" + div_id.id).toggle();
}
<a id="lnk_skills" onclick="ShowOrHidePanel(div_1); return false;" href="javascript:ShowOrHidePanel(div_1);"></a>
<a id="lnk_tech" onclick="ShowOrHidePanel(div_2); return false;" href="javascript:ShowOrHidePanel(div_2);"></a>
<a id="lnk_user" onclick="ShowOrHidePanel(div_3); return false;" href="javascript:ShowOrHidePanel(div_3);"></a>
<div id = "div_1"></div>
<div id = "div_2"></div>
<div id = "div_3"></div>
我有什么尝试过：
我试过用ab ove函数通过传递div id。但它隐藏了1个div和2个div仍在显示。
What I have tried:
I tried with above function by passing div id. But it's hiding 1 div and 2 divs are still showing.
推荐答案
（ ＃ + div_id.id）.toggle（）;
}
< a id = lnk_skills onclick = ShowOrHidePanel（div_1）; return false; href = javascript：ShowOrHidePanel（div_1）;> < / a >
< a id = lnk_tech onclick = ShowOrHidePanel （div_2）; return false; href = javascript：ShowOrHidePanel（div_2）;> < / a >
< a id = lnk_user onclick =ShowOrHidePanel（div_3）; return false; href = javascript：ShowOrHidePanel（div_3）;> < span class =code-keyword>< / a >
< div id = div_1> < / div >
< div id = div_2> < / div >
< div id = div_3> < / div >
("#" + div_id.id).toggle(); } <a id="lnk_skills" onclick="ShowOrHidePanel(div_1); return false;" href="javascript:ShowOrHidePanel(div_1);"></a> <a id="lnk_tech" onclick="ShowOrHidePanel(div_2); return false;" href="javascript:ShowOrHidePanel(div_2);"></a> <a id="lnk_user" onclick="ShowOrHidePanel(div_3); return false;" href="javascript:ShowOrHidePanel(div_3);"></a> <div id = "div_1"></div> <div id = "div_2"></div> <div id = "div_3"></div>
我有什么尝试过：
我试过用ab ove函数通过传递div id。但它隐藏了1个div和2个div仍在显示。
What I have tried:
I tried with above function by passing div id. But it's hiding 1 div and 2 divs are still showing.
尝试
try
<html>
<head>
<style>
#div_1, #div_2, #div_3 {
display: none;
}
</style>
<script>
function ShowOrHidePanel(div_id) {
var divs = ['div_1', 'div_2', 'div_3'];
for (var i = 0; i < divs.length; i++) {
document.getElementById( divs[i]).style.display = 'none';
}
document.getElementById(div_id).style.display = 'block';
}
</script>
</head>
<body>
<a id="lnk_skills" href="javascript:ShowOrHidePanel('div_1');">1</a>
<a id="lnk_tech" href="javascript:ShowOrHidePanel('div_2');">2</a>
<a id="lnk_user" href="javascript:ShowOrHidePanel('div_3');">3</a>
<div id="div_1"> div1</div>
<div id="div_2">div2</div>
<div id="div_3">div3</div>
</body>
</html>
你只是为了点击的链接切换div，你需要做的不仅是显示你想要的div而是隐藏其他div。有很多方法可以做到这一点，但一种方法是标记你希望成为切换的一部分的div，这样你就可以将它们作为隐藏目标。
You're only toggling the div for the link that was clicked, what you need to do is not only show the div you want but hide the others. Lots of ways to do this, but one is to mark the divs you want to be a part of the toggling so you can target them to be hidden.
<script type="text/javascript">
function ShowOrHidePanel(div_id)
{
这篇关于使用javascript或jquery隐藏或显示面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
