如何在javascript中創建關閉按鈕關閉當前div並使另一個div出現？

Question

function show(id){ 
 
    document.getElementById('close_btn').style.display="block"; 
 
    switch(id) { 
 
     case 'item_1_red': 
 
      document.getElementById('visible').style.display="none"; 
 
      document.getElementById('1').style.display="block"; 
 
     break; 
 

 
     case 'item_2_red': 
 
      document.getElementById('visible').style.display="none"; 
 
      document.getElementById('2').style.display="block"; 
 
     break; 
 

 
     case 'item_3_red': 
 
      document.getElementById('visible').style.display="none"; 
 
      document.getElementById('3').style.display="block"; 
 
     break; 
 

 
     case 'item_4_red': 
 
      document.getElementById('visible').style.display="none"; 
 
      document.getElementById('4').style.display="block"; 
 
     break; 
 
    }; \t \t 
 
} 
 

 
function close_f() { 
 
    document.getElementById('visible').style.display="block"; 
 
}

.block-1{ 
 
    width: 100%; 
 
    margin:0 auto; 
 
    padding: 0px; 
 
} 
 

 
.visible{ 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
.invisible{ 
 
    width: 50%; 
 
    margin: 0 auto; 
 
}

<div class="close_btn" id="close_btn" onclick="close_f()" style="display:none;">fermer </div> 
 

 
<div class="block-1"> 
 
    <ul class="visible" id='visible'> 
 
     <li class="item-1"><div class="item_1_red" id="item_1_red" onclick="show(this.id)">item1</div></li> 
 
     <li class="item-2"><div class="item_2_red" id="item_2_red" onclick="show(this.id)">item2</div></li> 
 
     <li class="item-3"><div class="item_3_red" id="item_3_red" onclick="show(this.id)">item3</div></li> 
 
     <li class="item-4"><div class="item_4_red" id="item_4_red" onclick="show(this.id)">item4</div></li> 
 
    </ul> 
 
</div> 
 

 
<div class="block-2"> 
 
    <ul class="invisible" id="invisible"> 
 
     <li class="item-1"><div class="item_1_red" id="1" style="display:none;">hi i'm item1</div></li> 
 
     <li class="item-2"><div class="item_2_red" id="2" style="display:none;">hi i'm item2</div></li> 
 
     <li class="item-3"><div class="item_3_red" id="3" style="display:none;">hi i'm item3</div></li> 
 
     <li class="item-4"><div class="item_4_red" id="4" style="display:none;">hi i'm item4</div></li> 
 
    </ul> 
 
</div>

我想有在第一時間只有4個項目列表，當我選擇點擊第1項，第ul（可見）消失，只有我會得到：」嗨，我是項目1「與按鈕」關閉「，如果我點擊關閉，」嗨我item1「消失，讓位置的第一個div：可見（前4項目列表），然後我可以點擊任何項目我想，這將使格：看不見的出現，顯示：嗨，我是itemX

看看我的劇本請

請幫忙嗎？

here is jsfiddle demo

編輯：此外，我需要有按鈕「下一個」，「預覽」項目之間的導航（第一UL上的物品1點擊後，就會使：「嗨，我是第1項」如果我點擊「下一步」它會使：「嗨，我是項目2」等..這EXAMPLE似乎是答案的一部分，我定製它2小時，但不爲我工作，任何幫助，請？

Answer 1

如果你打算做這種事情，我強烈建議你學習和使用jQuery它使這樣的事情瞬間看到這個小提琴：。http://jsfiddle.net/rr8eu5ev/

HTML：

<div class="close_btn" id="close_btn" onclick="close_f()" style="display:none;">close </div> 



<div class="block-1"> 
<ul class="visible" id='visible'> 
    <li data-elem="item_1_red">item1</li> 
    <li data-elem="item_2_red">item2</li> 
    <li data-elem="item_3_red">item3</li> 
    <li data-elem="item_4_red">item4</li> 
</ul> 
</div> 
<div class="block-2"> 
<ul class="invisible" id="invisible"> 
    <li id="item_1_red">hi i'm item1</li> 
    <li id="item_2_red">hi i'm item2</li> 
    <li id="item_3_red">hi i'm item3</li> 
    <li id="item_4_red">hi i'm item4</li> 
</ul> 
</div> 

CSS：

.block-1{ 
width: 100%; 
margin:0 auto; 
padding: 0px; 
} 
.visible{ 
width: 50%; 
margin: 0 auto; 
} 

.invisible{ 
width: 50%; 
margin: 0 auto; 
} 

.invisible li { display: none; } 

的javascript：

$(function(){ 
    $('#visible li').click(function(){ 
     var elem = $(this).data('elem'); 
     $('#' + elem).show(); 
     $('.close_btn').show(); 
     $('#visible').hide(); 
    }); 

    $('.close_btn').click(function(){ 
     $('#visible').show(); 
     $('#invisible li').hide(); 
     $('.close_btn').hide(); 
    }); 
}); 

Answer 2

你不是躲在 「你好，我叫itemX」 的div在關閉功能。這裏是一個更新的jsfiddle，我認爲做你想做的。

我剛添加

document.getElementById('1').style.display="none"; 

用於編號的div（http://jsfiddle.net/86xz90mc/3/）的每個的每個。

您也可以使關閉功能採用一個ID參數，然後傳遞該元素的ID，因此您不必硬編碼它。