javascript - Hiding all divs and showing one with jquery - Stack Overflow

admin管理员组

文章数量:1023758

I've looked around on the Stack for an answer that I could apply, but I'm not great with javascript.

I've got a list of links that need to show a hidden div. Easy enough. But there are about 8 of these links and the divs have to occupy the same space. Therefore, when you click on Link 1 (Link 1's div appears), and you then click on Link 2, I need Link 1's div to disappear and Link 2's div to appear.

Currently, I'm using jQuery's toggle function to get the effect I'm looking for, but you have to click the link twice to hide the info again.

Any ideas would be greatly appreciated!

I've looked around on the Stack for an answer that I could apply, but I'm not great with javascript.

I've got a list of links that need to show a hidden div. Easy enough. But there are about 8 of these links and the divs have to occupy the same space. Therefore, when you click on Link 1 (Link 1's div appears), and you then click on Link 2, I need Link 1's div to disappear and Link 2's div to appear.

Currently, I'm using jQuery's toggle function to get the effect I'm looking for, but you have to click the link twice to hide the info again.

Any ideas would be greatly appreciated!

• javascript
• jquery
• show-hide

Share Improve this question Follow asked Aug 30, 2011 at 15:29 CritologistCritologist 11522 silver badges88 bronze badges 1

• Show your html and your code if you want the best/fastest/most relevant help. – jfriend00 Commented Aug 30, 2011 at 15:32

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Without having any syntax to work with, you should be able to use something like the following:

To Hide the links themselves:

//When a link is clicked...
$(".yourlink").click(function(){
     //Hide all of the links
     $(".yourlink").hide();
     //Show the selected link
     $(this).show();
});

likewise, if you wanted to use divs: (using the included HTML below)

//Javascript 
$(".link").click(function()
{
    $('div').hide();
    $('#'+$(this).attr('name')).show();   
});

//HTML
<a class='link' name='1'>Link 1</a>
<a class='link' name='2'>Link 2</a>
<a class='link' name='3'>Link 3</a>
<a class='link' name='4'>Link 4</a>
<a class='link' name='5'>Link 5</a>
<a class='link' name='6'>Link 6</a>
<a class='link' name='7'>Link 7</a>
<a class='link' name='8'>Link 8</a>

<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>
<div id='8'>8</div>

Working Demo

Instead of toggle, use .show() to display and .hide() to hide.

There are two simple approaches you could take in this situation.

1. Utilize CSS to help toggle visibility.
2. Utilize show() / hide() in jQuery.

The one I would suggest is utilizing CSS classes to help you acplish your request. Create a class .showObject { display: block; } and another one .hideObject { display: none; }. Once you have the classes, you can utilize the jQuery functions addClass() and removeClass() to modify the display property.

    <a href="#" class="hider">link 1</a>
    <div id="div1" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 2</a>
    <div id="div2" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 3</a>
    <div id="div3" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 4</a>
    <div id="div4" class="content" style="display:none;">
    </div>

    $(".hider").click(function(event){
        $(".content").hide();
        $(this).next().show();


    });

I've looked around on the Stack for an answer that I could apply, but I'm not great with javascript.

I've got a list of links that need to show a hidden div. Easy enough. But there are about 8 of these links and the divs have to occupy the same space. Therefore, when you click on Link 1 (Link 1's div appears), and you then click on Link 2, I need Link 1's div to disappear and Link 2's div to appear.

Currently, I'm using jQuery's toggle function to get the effect I'm looking for, but you have to click the link twice to hide the info again.

Any ideas would be greatly appreciated!

I've looked around on the Stack for an answer that I could apply, but I'm not great with javascript.

I've got a list of links that need to show a hidden div. Easy enough. But there are about 8 of these links and the divs have to occupy the same space. Therefore, when you click on Link 1 (Link 1's div appears), and you then click on Link 2, I need Link 1's div to disappear and Link 2's div to appear.

Currently, I'm using jQuery's toggle function to get the effect I'm looking for, but you have to click the link twice to hide the info again.

Any ideas would be greatly appreciated!

• javascript
• jquery
• show-hide

Share Improve this question Follow asked Aug 30, 2011 at 15:29 CritologistCritologist 11522 silver badges88 bronze badges 1

• Show your html and your code if you want the best/fastest/most relevant help. – jfriend00 Commented Aug 30, 2011 at 15:32

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Without having any syntax to work with, you should be able to use something like the following:

To Hide the links themselves:

//When a link is clicked...
$(".yourlink").click(function(){
     //Hide all of the links
     $(".yourlink").hide();
     //Show the selected link
     $(this).show();
});

likewise, if you wanted to use divs: (using the included HTML below)

//Javascript 
$(".link").click(function()
{
    $('div').hide();
    $('#'+$(this).attr('name')).show();   
});

//HTML
<a class='link' name='1'>Link 1</a>
<a class='link' name='2'>Link 2</a>
<a class='link' name='3'>Link 3</a>
<a class='link' name='4'>Link 4</a>
<a class='link' name='5'>Link 5</a>
<a class='link' name='6'>Link 6</a>
<a class='link' name='7'>Link 7</a>
<a class='link' name='8'>Link 8</a>

<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>
<div id='8'>8</div>

Working Demo

Instead of toggle, use .show() to display and .hide() to hide.

There are two simple approaches you could take in this situation.

1. Utilize CSS to help toggle visibility.
2. Utilize show() / hide() in jQuery.

The one I would suggest is utilizing CSS classes to help you acplish your request. Create a class .showObject { display: block; } and another one .hideObject { display: none; }. Once you have the classes, you can utilize the jQuery functions addClass() and removeClass() to modify the display property.

    <a href="#" class="hider">link 1</a>
    <div id="div1" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 2</a>
    <div id="div2" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 3</a>
    <div id="div3" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 4</a>
    <div id="div4" class="content" style="display:none;">
    </div>

    $(".hider").click(function(event){
        $(".content").hide();
        $(this).next().show();


    });

本文标签： javascriptHiding all divs and showing one with jqueryStack Overflow