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();
    });
});

未经测试但应该没问题。

使用Javascript显示和隐藏内容

1 个答案: