Question

每当我按下其中一个按钮时，它们就会变为.active css（这很好），但问题是：当我点击另一个按钮时，它们会变为.active css（这很好），但前一个按钮保持不变他们的.active css，我不想要那个，在我点击另一个之后我希望他们采取默认的css和按下按钮来取得.active css HTML

<button id="btn1">a</button>
<button id="btn2">b</button>
<button id="btn3">c</button>
<button id="btn4">d3</button>
<button id="btn5">e 4</button>
<button id="btn6">f 5</button>
<button id="btn7">g 6</button>
<button id="btn8">h 7</button>
<div class="divToHide" id="story">story</div>
<div class="divToHide" id="z1">1</div>
<div class="divToHide" id="z2">2</div>
<div class="divToHide" id="z3">3</div>
<div class="divToHide" id="z4">4</div>
<div class="divToHide" id="z5">5</div>
<div class="divToHide" id="z6">6</div>
<div class="divToHide" id="z7">7</div>

CSS

#z1, #z2, #z3, #z4, #z5, #z6, #z7 {
    display: none;
}
.active {
    color: red;
}

JS

$(function () {

    $('#btn1').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#story').fadeToggle(400);
    });

    $('#btn2').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z1').fadeToggle(700);
    });

    $('#btn3').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z2').fadeToggle(700);
    });

    $('#btn4').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z3').fadeToggle(700);
    });

    $('#btn5').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z4').fadeToggle(700);
    });

    $('#btn6').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z5').fadeToggle(700);
    });

    $('#btn7').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z6').fadeToggle(700);
    });

    $('#btn8').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z7').fadeToggle(700);
    });

});

Answer 1

一般提示：不要重复jQuery代码（特别是因为它已经使用了这个）。将类应用于所有按钮（以允许组选择）并从数据属性中数据驱动任何其他要求（如目标元素）。

对于这个例子，我只是将div中的按钮包围起来，这样它们就可以一起被选中。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/pEA9R/

$(function () {
    $(document).on('click', 'button', function () {
        var $this = $(this);

        // Fetch the data-id attribute value for our target element
        var target = $this.data('id');

        // remove the active class from all buttons
        $('#buttons button').removeClass('active');

        // Hide all target divs
        $('.divToHide').hide();

        // highlight the clicked item
        $this.addClass('active');

        // Show the required div
        $('#' + target).fadeToggle(400);
    });

});

这也使用on的委托版本。所以你可以让它听取按钮的父级，而不是document使得效率更高一些：

    $('#button').on('click', 'button', function () {

委托事件很棒，因为它们只创建一个处理程序连接，甚至支持动态添加的项目（在目标祖先的某处添加）。

Answer 2

在第2行添加此行：

 // After This Line:
 // $(function () {

 $("button").click(function () {$('button').removeClass('active')});

当您点击其中一个按钮时，上述代码remove active将为所有buttons提供课程。

Answer 3

创建一个单独的函数，从html中删除所有活动的类css。将以下语句放在该函数中，并从每个按钮单击事件中调用它。 $("button").removeClass('active');

修改最好将你的按钮包装在一个div中，并使用id say .. buttonWrapper并使用以下代码代替。 $("buttonWrapper > button").removeClass('active');

按钮保持风格

3 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/pEA9R/