jquery - JQuery 函数不会在第一次点击时触发，但在所有后续点击时都会按预期运行

Question

我只需要选中的链接显示为选中状态，并在隐藏其他两个的同时显示指定的 div。这是jsfiddle：

http://jsfiddle.net/HZ4CZ/1/

为什么第一次点击不起作用，但之后的每一次点击都起作用？

$(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');
        });

    });
});

Answer 1

不要嵌套你的点击处理程序！摆脱所有包罗万象的处理程序，你就准备好了。小提琴：http: //jsfiddle.net/tymeJV/HZ4CZ/2/

斧头这个处理程序：$('ul#chooseType li a').click(function(e) {

它之所以有效，是因为您的点击处理程序实际上都没有在页面加载时被绑定，它们在初始点击后被绑定。

Answer 2

您正在安装一个单击处理程序'ul#chooseType li a'，该处理程序在单击时会安装其他单击处理程序。只需删除它，它应该可以工作：http: //jsfiddle.net/HZ4CZ/12/

Answer 3

display向所有用于显示选项卡内容的 DIV添加一个类。然后像这样使用 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');
    });
});

小提琴

Answer 4

我在我的一个组件中导入引导程序，如下所示：

import 'bootstrap/dist/js/bootstrap.bundle.min.js';

事实证明，根本不需要导入引导程序。