Question

我想在单击容器内的删除按钮时隐藏容器，同时在导航中可以看到容器名称。

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

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

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

Answer 1

试试这个，

<强> 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 代码会在点击删除链接时使容器透明。

看到这个好词 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');
});

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

看到这个好词 DEMO

Answer 2

我认为这就是你要找的东西

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

Answer 3

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

将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

我做的是：

为每个锚标记添加了ID（删除链接）
我在开头隐藏了导航中的所有容器
其余的，你可以看到：）

容器隐藏和显示

3 个答案: