用Javascript顯示和隱藏內容

Question

請看這個主題。當點擊「關於我們，聯繫我們，通訊」時，它會顯示除當前內容之外的另一個div內容，點擊關閉按鈕它將消失。這個怎麼做？其實我想要的代碼以這種方式做.....

http://abyadwaswad.com/Vipe/index-image.html

Answer 1

沒有看到的主題和/或代碼，我們不能做的比給你的示例代碼等等。這個需要jQuery，但我相信你也可以在標準的JavaScript中做到這一點。

HTML：

<ul id="menu"> 
    <li class="menu-item" id="menu-item-1">Menu item 1</li> 
    <li class="menu-item" id="menu-item-2">Menu item 2</li> 
    <li class="menu-item" id="menu-item-3">Menu item 3</li> 
</ul> 
<div id="menu-content"> 
    <div id="menu-content-1"> 
     This is the content of menu #1. 
    </div> 
    <div id="menu-content-2" hidden="hidden"> 
     This is the content of menu #2. 
    </div> 
    <div id="menu-content-3" hidden="hidden"> 
     This is the content of menu #3. 
    </div> 
</div> 

的jQuery：

/** Wait until jQuery is ready */ 
jQuery(document).ready(function() { 
    var menu_items = jQuery("#menu").find("li"); 
    /** Execute script if a link within the menu has been clicked */ 
    menu_items.click(function() { 
     /** The ID (in this example number 1, 2 or 3) of the clicked menu item. 
     * which we need to display the corresponding content. 
     */ 
     var menu_item_id = jQuery(this).attr("id").replace("menu-item-"); 

     /** We hide every menu item content */ 
     menu_items.hide(); 

     /** And finally we display the content referred by the clicked menu item */ 
     jQuery("#menu").find(".menu-content-" + menu_item_id).show(); 
    }); 
}); 

未經測試，但應該罰款。