javascript - jQuery 隐藏/显示包含 php include 的 div

Question

首先让我说，我有 98% 的把握认为我的做法是错误的。

第一次发帖，温柔一点。我在一个网站上工作，我想要一个原始的管理门户后端，可以在单个 .php 页面中管理该站点。我有两列，左边是一系列堆叠的导航丸，右边是用于编辑网站内容的 PHP 表单。根据单击哪个导航栏，右侧将显示相应的 PHP 表单。我需要 jQuery 函数来 .empty() 名为“admin-div”的容器 div 和 .toggle() 基于 id 的正确 div。 jQuery 似乎不起作用，我很难理解原因。我是 jQuery 的新手，我还是一名学生，所以请原谅任何明显的疏忽。下面的代码供引用。先谢谢了! (抱歉，如果这是题外话或不是有效的问题/帖子，我是新手)。

            $(document).ready(function(){
            $("#geo-btn").click(function(){
            $("#admin-div").empty();
            $("#geo-div").toggle();
            });
        });     

        $(document).ready(function(){
            $("#school-btn").click(function(){
            $("#admin-div").empty();
            $("#school-div").toggle();
            });
        });



<div class="container">
<ul class="nav nav-pills nav-stacked nav-justified">
    <label>Edit Geographic Information</label>
        <li><button id="geo-btn" class="btn btn-warning" >Geography</button></li><br>
        <li><button id="school-btn" class="btn btn-warning" >Schools</button></li><br>
</ul>
<div class="admin-div">
    <div id="geo-div" align="left" class="span8">
        <?php
            require("geo.inc.php");
        ?>
    </div>
    <div id="school-div" align="left" class="span8">
        <?php
            require("school.inc.php");
        ?>
    </div>
</div>

Answer 1

这就是你想要做的吗:

<ul class="nav nav-pills nav-stacked nav-justified">
    <label>Edit Geographic Information</label>
        <li><button category="geo"  class="btn btn-warning" >Geography</button></li><br>
        <li><button category="school" class="btn btn-warning" >Schools</button></li><br>
</ul>
<div id="admin-div">
    <div id="geo-div" align="left" class="span8">
        <?php
            require("geo.inc.php");
        ?>
    </div>
    <div id="school-div" align="left" class="span8" style="display: none;">
        <?php
            require("school.inc.php");
        ?>
    </div>
</div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
     $(document).ready(function()
     {
        $(".btn").click(function()
        {
            var category = $(this).attr("category")

            $("#admin-div div").hide();
            $("#"+category+"-div").fadeIn();
        });
    });   
</script>