容器隐藏和显示

-3

我想隐藏容器，当我们点击容器内的删除按钮，并在导航中同时显示容器的名称。容器隐藏和显示

现在，当我们点击该div的导航链接时，容器将可见并隐藏导航链接。

我创建了一个让你更清楚：

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

$('.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'); 
});

来源

2014-03-07 Ranjeet

你只想隐藏点击的容器？如果你点击另一个容器，隐藏容器应该显示？ –

检查jQuery的文档'show（）'和'hide（）' – rhgb

@CJRamki是的，我只想隐藏那个容器被点击。每个容器将相应地隐藏起来，并且隐藏它的容器在导航中显示名称。 – Ranjeet

我认为这是你在找什么

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

来源

2014-03-07 07:20:16 Jack

是的！寻找相同的，但只有一件事是留下来的，即我需要隐藏和显示整个容器不仅“删除”。 – Ranjeet

好吧生病编辑我的代码holdon – Jack

我刚刚编辑我的代码来隐藏点击链接的容器现在尝试 – Jack

试试这个，

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

这的JavaScript代码会使容器透明时，点击删除链接。

看到这个FIDDLEDEMO

$('.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'); 
});

这的JavaScript代码将隐藏容器时点击删除链接。

$('.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'); 
});

看到这个FIDDLEDEMO

来源

2014-03-07 07:29:53

非常感谢..它的工作很好，但我从下面使用了另一个。但仍然感谢您的帮助:) – Ranjeet

这是你在找什么？你的问题很混乱。但根据你的意见，我认为这是你想要的。我希望我写。

更改您的HTML这个

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

和你的jQuery这个

$(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(); 
    }); 
});

这里的工作JSFiddle

我所做的是：

广告DED标识每个锚标记（删除链接）
我藏在导航的所有容器中开始
，剩下的，你可以看到:)

来源

2014-03-07 07:32:01 prateekkathal

容器隐藏和显示

回答

相关问题