[英]JQuery function doesn't fire on first click, but behaves as expected on all subsequent clicks
I simply need the selected link to show as selected and to show the indicated div while hiding the other two. 我只需要选择链接以显示为选定状态并显示所指示的div,同时隐藏其他两个。 Here's the jsfiddle:
这是jsfiddle:
http://jsfiddle.net/HZ4CZ/1/ http://jsfiddle.net/HZ4CZ/1/
Why is it not working the first click, but working every click after that? 为什么第一次点击不起作用,但是之后每次点击都起作用?
$(document).ready(function() {
$('ul#chooseType li a').click(function(e) {
$('#active').click(function(){
$('.activeDiv').removeClass('show_hide');
$('.inactiveDiv').addClass('show_hide');
$('.thirdMenuDiv').addClass('show_hide');
$('#active').addClass('selected');
$('#inactive').removeClass('selected');
$('#thirdMenu').removeClass('selected');
});
$('#inactive').click(function(){
$('.activeDiv').addClass('show_hide');
$('.inactiveDiv').removeClass('show_hide');
$('.thirdMenuDiv').addClass('show_hide');
$('#active').removeClass('selected');
$('#inactive').addClass('selected');
$('#thirdMenu').removeClass('selected');
});
$('#thirdMenu').click(function(){
$('.activeDiv').addClass('show_hide');
$('.inactiveDiv').addClass('show_hide');
$('.thirdMenuDiv').removeClass('show_hide');
$('#active').removeClass('selected');
$('#inactive').removeClass('selected');
$('#thirdMenu').addClass('selected');
});
});
});
Dont nest your click handlers! 不要嵌套您的点击处理程序! Get rid of that all encompassing handler and you're set.
摆脱所有包含的处理程序,一切就绪。 Fiddle: http://jsfiddle.net/tymeJV/HZ4CZ/2/
小提琴: http : //jsfiddle.net/tymeJV/HZ4CZ/2/
Axe this handler: $('ul#chooseType li a').click(function(e) {
$('ul#chooseType li a').click(function(e) {
这个处理程序: $('ul#chooseType li a').click(function(e) {
It works because none of your click handlers actually get bound on page load, they get bound after the initial click. 之所以有效,是因为您的点击处理程序实际上没有绑定到页面加载上,而是在初次点击之后就绑定了。
You're installing one click handler 'ul#chooseType li a'
which - when clicked - installes the other click handlers. 您正在安装一个单击处理程序
'ul#chooseType li a'
,该单击处理程序将在单击时安装其他单击处理程序。 Just remove it and it should work: http://jsfiddle.net/HZ4CZ/12/ 只需删除它,它应该可以工作: http : //jsfiddle.net/HZ4CZ/12/
Add a class display
to all the DIVs that are used to display the tab contents. 将类
display
添加到用于显示选项卡内容的所有DIV。 Then use DRY code like this: 然后使用如下的DRY代码:
$(document).ready(function() {
$('ul#chooseType li a').click(function(e) {
$('ul#chooseType li a').removeClass('selected');
$(this).addClass('selected');
$('.display').addClass('show_hide');
$('.display.'+this.id+'Div').removeClass('show_hide');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.