javascript - 单击链接时显示/隐藏 div

Question

单击链接时，我试图显示和隐藏 div。我让 div 正确显示，但我希望当我单击另一个 div 时该 div 消失。这是我目前拥有的代码。

<script type="text/javascript"> 
            $(function() {
                $('#attach_silver').click(function() {
                    $('#sec_silver').show();
                    return false;
                });        
            });

            $(function() {
                $('#attach_gold').click(function() {
                    $('#sec_gold').show();
                    return false;
                });        
            });

            $(function() {
                $('#attach_platinum').click(function() {
                    $('#sec_platinum').show();
                    return false;
                });        
            });
        </script>

<a href="#" id="attach_silver">Silver</a>
    <a href="#" id="attach_gold">Gold</a>
    <a href="#" id="attach_platinum">Platinum</a>

<div id="sec_silver" style="display: none;">
        Hello world!! Silver              
    </div>

    <div id="sec_gold" style="display: none;">
        Hello world!! Gold             
    </div>

    <div id="sec_platinum" style="display: none;">
        Hello world!! Platinum            
    </div>

Answer 1

try to add a class

<div id="sec_silver" style="display: none;" class="divclass">
    Hello world!! Silver              
</div>

<div id="sec_gold" style="display: none;" class="divclass">
    Hello world!! Gold             
</div>

<div id="sec_platinum" style="display: none;" class="divclass">
    Hello world!! Platinum            
</div>

and after this code in jquery

       $(function() {
                $('#attach_silver').click(function() {
                    $('.divclass').hide();
                    $('#sec_silver').show();
                    return false;
                });        
            });

            $(function() {
                $('#attach_gold').click(function() {
                    $('.divclass').hide();
                    $('#sec_gold').show();
                    return false;
                });        
            });

            $(function() {
                $('#attach_platinum').click(function() {
                    $('.divclass').hide();
                    $('#sec_platinum').show();
                    return false;
                });        
            });

In this mode you hide all div on a click event, and show the div that you want

Answer 2

您的点击事件当前显示相关的 div，您只需要它们也隐藏其他 div。

Answer 3

使用^ 属性以选择器开头

$('div[id^="sec_"]').hide(); // will hide all the div with id starting with sec_

你的代码变成

$(function () {
    $('#attach_silver').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_silver').show();
        return false;
    });
    $('#attach_gold').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_gold').show();
        return false;
    });
    $('#attach_platinum').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_platinum').show();
        return false;
    });
});

Answer 4

我喜欢 id/class 模式。此外，通过添加一个类，您可以删除该内联样式。添加：

.divclass{
    display: none
}

Answer 5

两行解决方案怎么样

$('a').click(function () {
    $('div:contains('+$(this).text()+')').show();
    $('div:not(:contains('+$(this).text()+'))').hide();
});

现场演示

Answer 6

你只显示其他 div，你从不告诉他们隐藏：

<script type="text/javascript"> 
$(function () {
    $('#attach_silver').click(function () {
        console.log('sliver click');
        $('#sec_silver').show();
        $('#sec_gold').hide();
        $('#sec_platinum').hide();
        return false;
    });
});

$(function () {
    $('#attach_gold').click(function () {
        $('#sec_gold').show();
        $('#sec_silver').hide();
        $('#sec_platinum').hide();
        return false;
    });
});

$(function () {
    $('#attach_platinum').click(function () {
        $('#sec_platinum').show();
        $('#sec_gold').hide();
        $('#sec_silver').hide();
        return false;
    });
});
</script>

Answer 7

用javascript做到这一点：

<a href="#xyz" onclick="hideDiv();">Hide Div</a>

function hideDiv()
{
 document.getElementById('myContainerDiv').style.display = "none";
}