[英]Jquery button toggle show hide div
I have these two divs on a page with two buttons beneath them to control hiding and showing them respectively. 我在页面上有这两个div,下面有两个按钮来控制隐藏和分别显示它们。
<div class="threeSixtyContainer">
<div class="toggle360" style="display: block;" id="Blue">Im Blue</div>
<div class="toggle360" style="display: none;" id="Red">Im Red</div>
<ul class="flashlinks">
<li id="" class="flashlinks"><a href="#Blue" onclick="toggle_visibility('Blue');">Blue</a></li>
<li id="" class="flashlinks"><a href="#Red" onclick="toggle_visibility('Red');">Red</a></li>
</ul>
</div>
I am using this javascript at the moment on the onclick of link. 我正在使用这个javascript链接的onclick上。
function toggle_visibility(id) {
var e = document.getElementById(id);
console.log(e);
if(e.style.display == 'none') {
e.style.display = 'block';
} else {
e.style.display = 'none';
}
}
It works however how do I make it so that clicking one button will disable the other. 但它如何工作,以便单击一个按钮将禁用另一个按钮。 So clicking blue will show the blue div and hide the red div, then disable the button and enable the other button so the same can be donw but in reverse. 因此,单击蓝色将显示蓝色div并隐藏红色div,然后禁用该按钮并启用另一个按钮,因此相同但可以反过来。
I have made a fiddle with the code i am using on my page which works, but on the fiddle its not? 我已经使用了我在我的页面上使用的代码的小提琴,但是在小提琴上却没有? not sure why, ill post it anyway. 不知道为什么,不管怎么说都不好意思。
EDIT _ Fiddle Now Working. 编辑_小提琴现在工作。 Thanks. 谢谢。
Here is a possible solution (no jQuery) : http://jsfiddle.net/wared/A6w5e/ . 这是一个可能的解决方案(没有jQuery): http : //jsfiddle.net/wared/A6w5e/ 。
As you might have noticed, links are not "disabled", I simply save the id of the DIV which is currently displayed in order to check the requested id before toggling : if (current !== id)
. 您可能已经注意到,链接不是“禁用”,我只是保存当前显示的DIV的ID,以便在切换之前检查所请求的ID: if (current !== id)
。
Another thing to note is that toggle_visibility
is overwritten (only once) inside itself. 另外需要注意的是, toggle_visibility
会在其内部被覆盖(仅一次)。 It might look weird, but it's just a way to create a closure in order to enclose the variable named current
inside a private context. 它可能看起来很奇怪,但它只是一种创建闭包的方法 ,以便在私有上下文中包含名为current
的变量。 The goal is to avoid polluting the parent scope. 目标是避免污染父范围。
Lastly, I've modified the original code to hide all divs except the one targeted by id
. 最后,我修改了原始代码以隐藏除id
之外的所有div。
function toggle_visibility(id) {
var current = 'Blue';
(toggle_visibility = function (id) {
var div, l, i;
if (current !== id) {
current = id;
div = document.getElementsByClassName('toggle360');
l = div.length;
i = 0;
for (; i < l; i++) {
div[i].style.display = div[i].id === id ? 'block' : 'none';
}
}
})(id);
}
Wrap your code in head
or body
. 将您的代码包裹在head
或body
。
You are executing your code before DOM
is created 您在创建DOM
之前执行代码
A couple people have commented why it doesn't work in fiddle. 有几个人评论了为什么它不适合小提琴。 To answer the question.... 回答这个问题....
It easy to toggle visibility using jquery if there are only two divs: 如果只有两个div,则可以使用jquery轻松切换可见性:
$(document).delegate('.flashlinks a', 'click', function () {
$('.toggle360').toggle();
});
I would use a css class to disable the links. 我会使用css类来禁用链接。 Then I would select what to do with the click based on if the class was present: 然后我会根据类是否存在来选择如何处理点击:
$(document).delegate('.flashlinks a:not(".disabled")', 'click', function () {
$('.toggle360').toggle();
$('.flashlinks a').toggleClass("disabled");
});
$(document).delegate('.flashlinks a.disabled', 'click', function () {
e.preventDefault();
});
and in my css I would have something like 在我的CSS中我会有类似的东西
.disabled {
color: black;
text-decoration:none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.