Question

我正在创建一个管理面板，我在页面左侧有一个面板，我想提出不同的数据。

我创建了一个JSFiddle来展示我正在做的事情。

我遇到的问题是我想要仪表板主页消息......

<div id="dashboard_home">Welcome to the Admin Dashboard</div>

成为页面加载时出现的唯一div。然后，当单击面板选项时，仪表板主页消息将消失，然后仅显示新面板选择的div。

然后，一旦单击另一个面板选项，我希望隐藏前一个选择并显示新选择，所以选择第四个。

我需要做什么？

HTML

<div class="panel_out">
    <div class="panel">
        <input type='button' class="panel_buttons" id='user_request_button' value='User Requests'>
        <input type='button' class="panel_buttons" id='message_button' value='Message Center'>
        <input type='button' class="panel_buttons" id='draft_order_button' value='Draft Order'>
        <input type='button' class="panel_buttons" id='draft_input_button' value='Draft Input'>
        <input type='button' class="panel_buttons" id='announcements_button' value='Announcements'>
        <input type='button' class="panel_buttons" id='dues_button' value='League Dues'>
    </div>
</div>
<div class="dashboard_selection">
    <div id='user_requests'>User Requests</div>
    <div id='message_center'>Message Center</div>
    <div id='draft_order'>Draft Order</div>
    <div id='draft_input'>Draft Input</div>
    <div id='announcements'>Announcements</div>
    <div id='dues'>Leauge Dues</div>
</div>

JS

jQuery(document).ready(function () {
    jQuery('#user_request_button').on('click', function (event) {
        jQuery('#user_requests').toggle('hide');
    });
    jQuery('#message_button').on('click', function (event) {
        jQuery('#message_center').toggle('hide');
    });
    jQuery('#draft_order_button').on('click', function (event) {
        jQuery('#draft_order').toggle('hide');
    });
    jQuery('#draft_input_button').on('click', function (event) {
        jQuery('#draft_input').toggle('show');
    });
    jQuery('#announcements_button').on('click', function (event) {
        jQuery('#announcements').toggle('show');
    });
    jQuery('#dues_button').on('click', function (event) {
        jQuery('#dues').toggle('show');
    });
});

Answer 1

<强> Demo

当你不需要时，你会添加太多的定制事件。规范化您的ID以匹配按钮ID，并从另一个派生一个

e.g。 <input id='user_requests_button' />找到<div id="user_requests">

显示您想要的div，然后使用siblings()获取您想要隐藏的元素，并隐藏它们。

在加载的第一个按钮上触发click事件，仅在页面加载时显示第一个按钮事件（如果不使用CSS执行此操作）。

jQuery(document).ready(function () {
    $('.panel_out input').on('click', function(){
        // derive the ID
        var id_to_show = '#' + this.id.replace('_button', '');
        // show one and hide the others
        $(id_to_show).show().siblings().hide();
    }).first().trigger('click'); // trigger the first on page load
});

在加载的第一个按钮上触发click事件，仅在页面加载时显示第一个按钮事件（如果不使用CSS执行此操作）。

Answer 2

点击一下，首先隐藏所有面板。然后使用.show（）

打开所需的一个

所以我会这样做：

$('.panel').click(function(e){
 $('.panel').hide();
 $(e.currentTarget).closest('panel').show();
});

让div容器显示隐藏，然后用按钮显示

2 个答案: