容器隱藏和顯示

-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

容器隱藏和顯示

回答

相關問題