javascript单击功能出现问题

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切换可见性$().toggleClass('hiddenCourse')这节课。

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

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

Answer 2

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

Answer 3

看起来您想要类似手风琴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隐藏不会发生click事件的div