javascript点击功能有问题

使用以下代码，单击菜单项时，它将从外部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>

$（函数（）{
$（“#手风琴1”）。单击（函数（evt）{
$（“#course1”）.load（“course1.html”）
evt.preventDefault（）；
})
$（“#手风琴2”）。单击（函数（evt）{
$（“#course2”）.load（“course2.html”）
evt.preventDefault（）；
})
$（“#手风琴3”）。单击（函数（evt）{
$（“#course3”）.load（“course3.html”）
evt.preventDefault（）；
})
})

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

看起来您需要类似于手风琴UI效果的东西

看看这里，这样你只需要加载一次内容。

---

还调用

$（'#id'）.empty（）

将删除内容。

如果我理解，您希望清除其他

s：

<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>

$（函数（）{
$（“#手风琴1”）。单击（函数（evt）{
$（“#course1”）.load（“course1.html”）；
$（“#course2”）.empty（）；
$（“#course3”）.empty（）；
evt.preventDefault（）；
})
$（“#手风琴2”）。单击（函数（evt）{
$（“#course2”）.load（“course2.html”）；
$（“#course1”）.empty（）；
$（“#course3”）.empty（）；
evt.preventDefault（）；
})
$（“#手风琴3”）。单击（函数（evt）{
$（“#course3”）.load（“course3.html”）；
$（“#course1”）.empty（）；
$（“#course2”）.empty（）；
evt.preventDefault（）；
})
})

您可以：

• 在加载新内容之前，在其他div中加载一个空URL
• 在加载新内容之前，请删除所有div的内容
• 保留内容，但使用CSS隐藏没有单击事件的div

---

您可以使用

$（）.empty（）

，简单地清空其他元素，但我认为更好的解决方案是切换可见性，使用类似

$（）.toggleClass（'hiddenCourse'）

和与该类关联的

显示：none

CSS

此外，每次获取文件都会反应迟缓，而且网络要求很高，您应该考虑记住哪些文件已经被取入并包含到DOM中。

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