Fatal编程技术网

Javascript 容器隐藏和显示

javascript jquery html

Javascript 容器隐藏和显示,javascript,jquery,html,show-hide,Javascript,Jquery,Html,Show Hide,我想隐藏一个容器，当我们点击容器内的移除按钮时，同时在导航中，容器的名称将可见 现在，当我们单击该div的导航链接时，容器将可见并隐藏导航链接 我创建了一个来让您更清楚： <div id="1" class="main-container"> <a href="#" class="rem-widget">Remove</a> </div> <div id="2" class="main-container"> <

我想隐藏一个容器，当我们点击容器内的移除按钮时，同时在导航中，容器的名称将可见

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

我创建了一个来让您更清楚：

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

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

我想这就是你要找的

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


$（文档）.ready（函数（）{
$（'.main container a.rem-widget'）。单击（function（）{
$（this.parent（）.hide（'slow'）；
$（'.+$（this.attr（'id'））.show（'slow'）；
});
$（'.navigation a'）。单击（函数（）{
$（this.hide（'slow'）；
$（'#'+$（this.attr（'class'））.parent（）.show（'slow'）；
});
});
试试这个

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>
当单击remove链接时，此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');
});
看这把小提琴

当单击删除链接时，此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');
});
看这把小提琴

这就是你要找的吗？你的问题很令人困惑。但根据你的评论，我认为这是你想要的。我希望我正在写作

将您的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>
这是一张工作票

我所做的是：

  • 为每个锚定标记添加Id（删除链接）

  • 我在一开始就隐藏了导航中的所有容器

  • 其余的，你可以看到：）

    • 是否仅隐藏单击的容器？如果单击另一个容器，隐藏的容器应该显示？请检查jquery文档中的
    show（）
    和
    hide（）
    @CJRamki是的，我只想隐藏单击的容器。每个容器都会相应地隐藏，隐藏其容器的容器会在导航中显示其名称。@CJRamki否，每个容器上的名称不同，对另一个容器上的任何容器都不会产生影响。其工作结果，我检查了你的小提琴你还想要什么？是！寻找相同的，但只剩下一件事，即我需要隐藏和显示整个容器，而不仅仅是“删除”。我刚刚编辑了我的代码，以隐藏单击链接的容器立即尝试非常感谢这一点，它工作得非常好，得到了我要找的东西：）非常感谢。。它工作的很好，但我用了另一个从下面。但还是要感谢你的帮助：） 
    $(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();
    });
});