Question

我正在尝试在点击链接时显示和隐藏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

尝试添加一个类

<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>

在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;
                });        
            });

在此模式下，您可以隐藏点击事件中的所有div，并显示您想要的div

Answer 2

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

Answer 3

使用^ attribute-starts with selector

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

你只显示其他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 5

两线解决方案

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

Live Demo

Answer 6

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

.divclass{
    display: none
}

Answer 7

使用javascript执行此操作：

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

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

单击链接时显示/隐藏div

7 个答案: