javascript - container hide and show - Stack Overflow

admin管理员组

文章数量:1327665

I want to hide a container when we click on remove button inside container and same time in navigation the name of container will be visible.

Now when we click on navigation link of that div, the container will be visible and hide the link from navigation.

I created one to make you more clear :

JSFIDDLE

HTML

<div id="1" class="main-container">
    <a href="#" class="rem-widget">Remove</a>
</div>
<div id="2" class="main-container">
    <a href="#" class="rem-widget">Remove</a>
</div>
<div id="3" class="main-container">
    <a href="#" class="rem-widget">Remove</a>
</div>
<div id="4" class="main-container">
    <a href="#" class="rem-widget">Remove</a>
</div>

<div class="navigation">
    <a href="#" style="display:none;" class="nav-widget-add">Container 1</a>
    <a href="#" style="display:none;" class="nav-widget-add">Container 2</a>
    <a href="#" style="display:none;" class="nav-widget-add">Container 3</a>
    <a href="#" style="display:none;" class="nav-widget-add">Container 4</a>
</div>

CSS

.main-container {
    width:100px;
    height:50px;
    margin:10px;
    float:left;
    background-color:grey;
}

JS

$('.rem-widget').live("click", function() {
    var currentId2 = $(this).parents(".main-container").attr('id');
    $('#' + currentId2).hide('slow');

    var currentId2 = $(this).parents(".nav-widget-add").attr('id');
    $('#' + currentId2).show('slow');
});

$('.nav-widget-add').live("click", function() {
    var currentId2 = $(this).parents(".main-containe").attr('id');
    $('#' + currentId2).show('slow');

    var currentId2 = $(this).parents("").attr('id');
    $('#' + currentId2).hide('slow');
});

I want to hide a container when we click on remove button inside container and same time in navigation the name of container will be visible.

Now when we click on navigation link of that div, the container will be visible and hide the link from navigation.

I created one to make you more clear :

JSFIDDLE

HTML

<div id="1" class="main-container">
    <a href="#" class="rem-widget">Remove</a>
</div>
<div id="2" class="main-container">
    <a href="#" class="rem-widget">Remove</a>
</div>
<div id="3" class="main-container">
    <a href="#" class="rem-widget">Remove</a>
</div>
<div id="4" class="main-container">
    <a href="#" class="rem-widget">Remove</a>
</div>

<div class="navigation">
    <a href="#" style="display:none;" class="nav-widget-add">Container 1</a>
    <a href="#" style="display:none;" class="nav-widget-add">Container 2</a>
    <a href="#" style="display:none;" class="nav-widget-add">Container 3</a>
    <a href="#" style="display:none;" class="nav-widget-add">Container 4</a>
</div>

CSS

.main-container {
    width:100px;
    height:50px;
    margin:10px;
    float:left;
    background-color:grey;
}

JS

$('.rem-widget').live("click", function() {
    var currentId2 = $(this).parents(".main-container").attr('id');
    $('#' + currentId2).hide('slow');

    var currentId2 = $(this).parents(".nav-widget-add").attr('id');
    $('#' + currentId2).show('slow');
});

$('.nav-widget-add').live("click", function() {
    var currentId2 = $(this).parents(".main-containe").attr('id');
    $('#' + currentId2).show('slow');

    var currentId2 = $(this).parents("").attr('id');
    $('#' + currentId2).hide('slow');
});

• javascript
• jquery
• html
• show-hide

Share Improve this question Follow edited Mar 7, 2014 at 7:02 Denis Tsoi 10.4k88 gold badges4141 silver badges5959 bronze badges asked Mar 7, 2014 at 5:59 RanjeetRanjeet 4511 gold badge11 silver badge66 bronze badges 10

• you want to hide only the clicked container? if you click on the another container, the hidden container should show? – CJ Ramki Commented Mar 7, 2014 at 6:08
• check jquery docs for show() and hide() – rhgb Commented Mar 7, 2014 at 6:08
• @CJRamki YES, I want to hide only that container is clicked. Each container will hide accordingly and the container which hides its displays the name in navigation. – Ranjeet Commented Mar 7, 2014 at 6:11
• @CJRamki No, on each container is different, there will be no effect on any container on another. – Ranjeet Commented Mar 7, 2014 at 6:19
• Its working find ,i checked your fiddle What else do you want? – Pratik Joshi Commented Mar 7, 2014 at 7:02

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 4

Try this,

HTML

<div id="1" class="main-container"> <a href="#" class="rem-widget">Remove</a>

</div>
<div id="2" class="main-container"> <a href="#" class="rem-widget">Remove</a>

</div>
<div id="3" class="main-container"> <a href="#" class="rem-widget">Remove</a>

</div>
<div id="4" class="main-container"> <a href="#" class="rem-widget">Remove</a>

</div>
<div class="navigation">    <a href="#" class="nav-widget-add" data-navi="1">Container 1</a>
    <a href="#" class="nav-widget-add" data-navi="2">Container 2</a>
    <a href="#" class="nav-widget-add" data-navi="3">Container 3</a>
    <a href="#" class="nav-widget-add" data-navi="4">Container 4</a>

</div>

css

.main-container {
    width:100px;
    height:50px;
    margin:10px;
    float:left;
    background-color:grey;
}

.nav-widget-add {
    display:none;
}

this javascript code will make the container transparent when click on the remove link.

SEE THIS FIDDLE DEMO

$('.rem-widget').click(function () {
    $(this).hide('slow');
    $(this.parentNode).css('background-color', 'transparent');
    $('a[data-navi=' + this.parentNode.id + ']').show('slow');
});

$('.nav-widget-add').click(function () {
    var navIndex = $(this).index() + 1;
    $('#' + this.dataset.navi).css('background-color', 'grey').children('.rem-widget').show('slow');
    $(this).hide('slow');
});

this javascript code will hide the container when click on the remove link.

$('.rem-widget').click(function () {
    $(this.parentNode).hide('slow');
    $('a[data-navi=' + this.parentNode.id + ']').show('slow');
});

$('.nav-widget-add').click(function () {
    $('#' + this.dataset.navi).show('slow');
    $(this).hide('slow');
});

SEE THIS FIDDLE DEMO

i think this is what you are looking for

 <script>
$( document ).ready(function() {

$('.main-container a.rem-widget').click(function(){
     $(this).parent().hide('slow');
     $('.'+$(this).attr('id')).show('slow');
});
$('.navigation a').click(function(){
     $(this).hide('slow');
     $('#'+$(this).attr('class')).parent().show('slow');
});

});
</script>
<body>

<div class="main-container">
    <a href="#" class="rem-widget" id="nav-widget-add1">Remove</a>
</div>
<div class="main-container">
    <a href="#" class="rem-widget" id="nav-widget-add2">Remove</a>
</div>
<div class="main-container">
    <a href="#" class="rem-widget" id="nav-widget-add3">Remove</a>
</div>
<div class="main-container">
    <a href="#" class="rem-widget" id="nav-widget-add4">Remove</a>
</div>

<div class="navigation">
    <a href="#" style="display:none;" class="nav-widget-add1">Container 1</a>
    <a href="#" style="display:none;" class="nav-widget-add2">Container 2</a>
    <a href="#" style="display:none;" class="nav-widget-add3">Container 3</a>
    <a href="#" style="display:none;" class="nav-widget-add4">Container 4</a>
</div>

</body>

Is this what you are looking for? Your question was quite confusing. But as per your ments, i think this is what you want. I hope I am write.

Change you HTML to this

<div id="1" class="main-container">
    <a href="#" id="maincontainer1" class="rem-widget">Remove</a>
</div>
<div id="2" class="main-container">
    <a href="#" id="maincontainer2" class="rem-widget">Remove</a>
</div>
<div id="3" class="main-container">
    <a href="#" id="maincontainer3" class="rem-widget">Remove</a>
</div>
<div id="4" class="main-container">
    <a href="#" id="maincontainer4" class="rem-widget">Remove</a>
</div>

<div class="navigation">
    <a href="#" id="container1" class="nav-widget-add">Container 1</a>
    <a href="#" id="container2"  class="nav-widget-add">Container 2</a>
    <a href="#" id="container3"  class="nav-widget-add">Container 3</a>
    <a href="#" id="container4"  class="nav-widget-add">Container 4</a>
</div>

and your jQuery to this

$(document).ready(function() {
    $('#container1').hide();
    $('#container2').hide();
    $('#container3').hide();
    $('#container4').hide();
    $('#maincontainer1').click(function() {
                $('#1').hide('slow');
                $('#container1').show();
    });

    $('#maincontainer2').click(function() {
                $('#2').hide('slow');
                $('#container2').show();
    });

    $('#maincontainer3').click(function() {
                $('#3').hide('slow');
                $('#container3').show();
    });

    $('#maincontainer4').click(function() {
                $('#4').hide('slow');
                $('#container4').show();
    });
    $('#container1').click(function() {
                $('#1').show('slow');
                $(this).hide();
    });
    $('#container2').click(function() {
                $('#2').show('slow');
                $(this).hide();
    });
    $('#container3').click(function() {
                $('#3').show('slow');
                $(this).hide();
    });
    $('#container4').click(function() {
                $('#4').show('slow');
                $(this).hide();
    });
});

Here's a working JSFiddle

What I did was:

1. Added Id to each anchor tag (Remove link)

2. I have hidden all containers in navigation in the beginning

3. And the rest, you can see :)

本文标签： javascriptcontainer hide and showStack Overflow