Question

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

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

$(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/

Ax这个处理程序：$('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');
    });
});

FIDDLE

Answer 4

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

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

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

JQuery函数在第一次单击时不会触发，但在所有后续点击中的行为与预期相同

4 个答案: