html - 隐藏/显示 div 切换循环

Question

我有什么： 3 个按钮，当单击一个时，它会被隐藏，并且每个框中都显示相应的框是单击框隐藏时关闭框的链接

我需要什么：单击关闭链接并关闭框时，我需要再次显示该按钮

摘要：按钮单击切换按钮隐藏/框显示，关闭单击切换框隐藏/按钮显示

当前代码

Answer 1

您只需要添加$('.showSingle').removeClass('selected');到$('.hide').click()函数并在其末尾添加 return false 以便不会调用链接的 href（将 # 放在 url 中）我还重写了第一个 click 事件，使其与第二个一致。

$(function(){
    $('.showSingle').click(function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        $('.targetDiv').hide();
        $('#div' + $(this).data('target')).show();
    });

    $('.hide').click(function() {
        $('.targetDiv').hide();
        $('.showSingle').removeClass('selected');
        return false;
    });
});

Answer 2

当您单击每个按钮时，您有一个调用，将“选定”类添加到按下的按钮并从所有其他按钮中删除相同的类。此类使按钮隐藏。然后你需要做的是当关闭链接被按下时，从所有按钮中删除类。

$('.hide').click(function() {
    $('.targetDiv').hide();
    $('.showSingle').removeClass('selected');
});

Answer 3

试试这个。

$(window).load(function(){
$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    var srcId = $(this).data('target');
    $('#div' + srcId).show();
    $('.targetDiv').click(function(){
        $('.targetDiv').hide();
        $(".showSingle[data-target='" +srcId +"']").show();
    });

});

Answer 4

这是适用于您当前 HTML 的代码。它有两个选项，隐藏按钮文本或隐藏按钮本身。另外作为旁注，如果您使用on()继续使用它 - 不要切换到.click()

JSFiddle 演示

$(function() {
    $('.targetDiv').hide(); //Start off with boxes hidden

    $('.showSingle').on('click', function() { //Link clicked
        $('.targetDiv').hide(); //Hide any open boxes
        $('.selected').removeClass('selected'); //Show all buttons
        //$(this).children('div').addClass('selected'); //Hide button text
        $(this).addClass('selected'); //Hide button box
        var id = $(this).data('target'); //Get desired target
        $('#div'+id).show(); //Show target box
        return false; //Stop link from going anywhere
    });

    $('.hide').on('click', function() {
        $('.targetDiv').hide(); //Hide any open boxes
        $('.selected').removeClass('selected'); //Show all buttons
        return false; //Stop link from going anywhere
    });
});​