Question

首先我要说我98％是正面的我会以错误的方式解决这个问题。

第一次发表海报，要温柔。我正在一个网站上工作，我想要一个原始的管理门户后端，可以在一个.php页面中管理该网站。我有两列，左边是一系列堆叠的导航丸，右边是一个PHP表单来编辑网站内容。根据单击哪个nav-pill，右侧将显示相应的PHP表单。我需要jQuery函数.empty（）容器div称为“admin-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>

Answer 2

如果我理解你的问题，你需要内容切换器，所以这里是一个例子 FIDDLE

首先向按钮添加data-rel属性，data-rel属性的内容在这种情况下必须与div ID匹配，它不一定是data-rel它可能是{{1}因为它是HTML5自定义数据属性，但是如果你更改它，也不要忘记更改脚本中的名称。

data-anything

第二次添加这段CSS

<li><button id="geo-btn" data-rel="geo-div" class="btn btn-warning" >Geography</button></li>
<li><button id="school-btn" data-rel="school-div" class="btn btn-warning" >Schools</button></li>

第三个也是最后一个在.span8:first-child { display: block; } .span8 { position: absolute; display: none; }标记

之前添加此脚本

</body>

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

2 个答案: