隱藏和顯示div，使用javascript

在學校項目上工作時，我遇到了一個問題，使用javascript顯示和隱藏了幾個div（確切地說是五個）。我希望能夠打開所有五個並將它們放置在頁面上，使用position：absolute和top和left cordinates，因爲這使得它們浮動在我的文本內容之上，我製作了一個seprate div，命名爲wrapper以佔據它們的空間並推送文字向下。然而，看起來像一個完美的代碼片段，不是。無論是名爲gs 1 - gs 5的菜單div還是佔用div都顯示出來。計數器背後的想法是，如果菜單div是opopened counter ++，else（意味着菜單設置爲unhidden），則減去計數器，並且因此如果沒有打開，則計數器等於0並且佔用應該被設置爲隱藏。隱藏和顯示div，使用javascript

int count = 0; 

function unhide(col2) { 

var item = document.getElementById(col2); 
var wrap = document.getElementById('wrapper'); 

    if (item) 
    {  
     //wrap.className=(item.className=='hidden')?'unhidden':'hidden'; 
     item.className=(item.className=='hidden')?'unhidden':'hidden'; 

     if(item.className=='unhidden') 
     { 
     count++;    
     } 
     else if(item.className=='hidden') 
     { 
     count--; 
     } 
    if(count > 0) 
    { 
    wrap.className=(item.className=='hidden')?'unhidden':'hidden'; 
    } 

    } 




} 
<a href="javascript:unhide('gs1');">Game Station 1</a> 
<a href="javascript:unhide('gs2');">Game Station 2</a> 
<a href="javascript:unhide('gs3');">Game Station 3</a> 
<a href="javascript:unhide('gs4');">Game Station 4</a> 
<a href="javascript:unhide('gs5');">Game Station 5</a> 

</div> 
    <div id="wrapper" class="hidden"> 
     <div id="gs1" class="hidden">  
     </div> 

     <div id="gs2" class="hidden"> 
     </div> 


     <div id="gs3" class="hidden">  
     </div> 

     <div id="gs4" class="hidden">  
     </div> 

     <div id="gs5" class="hidden">  
     </div> 
    </div>

和小CSS代碼段

.hidden { visibility: hidden; display: none;} 
.unhidden { visibility: visible; display: block;}

來源

2012-03-26 Giffesnaffen

只是爲了好玩，你能不能'警報（item.className）;'這是一個完整的代碼示例？因爲如果它不是，你可能很難用'item.className =='hidden''，因爲將會有多個類... – Michael 2012-03-26 20:20:20

好奇...你能告訴我們輸出的代碼是否爲這些div有問題嗎？我想知道如果偶然的話，他們除了隱藏或不隱藏之外還有其他課程。或者對於這個問題，如果你在開始時沒有輸出任何課程的話。 – Brian 2012-03-26 20:21:11

沒有數據在div中輸出，只是css代碼'＃gs1 { height：400px; width：192px; background-color：grey; left：384px; top：0; }'除了名稱後面的數字之外，所有5個div都是相同的「gs」 – Giffesnaffen 2012-03-26 20:42:29

這是由於該包裝被標記爲隱藏後的股利是取消隱藏。看我的例子 - http://jsfiddle.net/MYaNb/2/。

來源

2012-03-26 20:43:07 tjscience

謝謝，那整理出來了 – Giffesnaffen 2012-03-26 22:12:16

在CSS

.show_hide 
    { 
     display: none; 
    }

在你頁面的頭部將這個將這個。

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $(".slidingdiv").hide(); 
     $(".show_hide").show(); 
     $('.show_hide').click(function() 
     { 
      $(".slidingdiv").slideToggle(); 
     }); 
    }); 
</script>

將這個在地方，你會顯示和隱藏一個div

<div class="slidingdiv"> 
    something 
</div> 

<a href="#" class="show_hide">show/hide</a>

來源

2012-03-27 11:58:59

隱藏和顯示div，使用javascript

回答

相關問題