Question

使用以下代码，当单击菜单项时，它将从外部html文件加载内容。当我点击每个菜单项时，每个外部html文件中的内容都会保留在页面上。如何点击，只显示点击的菜单项中的内容？

<script type="text/javascript">
        $(function(){
            $("#accordion1").click(function(evt){
                $("#course1").load("course1.html")
                evt.preventDefault();
            })

            $("#accordion2").click(function(evt){
                $("#course2").load("course2.html")
                evt.preventDefault();
            })

            $("#accordion3").click(function(evt){
                $("#course3").load("course3.html")
                evt.preventDefault();
            })
        })
    </script>

<div id="content">
            <div id="course1">
            </div>
            <div id="course2">
            </div>
            <div id="course3">
            </div>
        </div>

Answer 1

您可以使用$().empty()清空其他元素，但我认为更好的解决方案是切换可见性，使用$().toggleClass('hiddenCourse')和display:none与此类关联的CSS

此外，由于每次获取文件的响应速度非常慢，而且网络要求很高，因此您应该考虑记住哪些文件已被提取并包含在DOM中。

另一种方法是在页面加载时准备好所有内容，因此唯一剩下的任务就是可见性切换。这取决于很多参数：如果内容的总和很大（文件的大小和数量），如果你喜欢在较慢的启动交易中使用光速响应应用程序，那么访问者可能会打开的部分数量，等等上。

Answer 2

加载html文件时删除其他div的内容。

Answer 3

看起来你想要像Accordion UI效果

这样的东西

看看这里，这样你只需要加载一次内容。 http://docs.jquery.com/UI/API/1.8/Accordion

同时调用$('#id').empty();也会删除内容。

Answer 4

如果我理解，你想要清除其他<div>：

<script type="text/javascript">
    $(function(){
        $("#accordion1").click(function(evt){
            $("#course1").load("course1.html");
            $("#course2").empty();
            $("#course3").empty();
            evt.preventDefault();
        })

        $("#accordion2").click(function(evt){
            $("#course2").load("course2.html");
            $("#course1").empty();
            $("#course3").empty();
            evt.preventDefault();
        })

        $("#accordion3").click(function(evt){
            $("#course3").load("course3.html");
            $("#course1").empty();
            $("#course2").empty();
            evt.preventDefault();
        })
    })
 </script>

Answer 5

你可以：

在加载新内容之前在其他div中加载空URL
在加载新内容之前删除所有div的内容
保留内容但使用CSS隐藏不会发生点击事件的div

麻烦的点击功能

5 个答案: