单击链接时显示/隐藏div

Question

I am trying to show and hide a div when clicking a link. I got the div to show correctly, but I want that div to go away when I click a different one. This is the code I currently have.

<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

Use ^ attribute-starts with selector

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

your code becomes

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

You only show the other divs, you never tell them to hide:

<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

How about a two line solution

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

Live Demo

Answer 6

I like the id/class pattern. Also, by adding a class you can remove that inline style. Add:

.divclass{
    display: none
}

Answer 7

To do it with javascript:

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

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