Javascript 如何更有效地管理html按钮单击事件？

一次点击按钮就完成这么多任务，而每个按钮都应该有自己的事件，这看起来很可笑：

 function allStories() {
     $('#zero-md').hide();
     $('.container-aboutme').hide();
     $('.container-allstories').show();
     $('.container-allstories').load("pages/allstories.html");
     $("#home").removeClass("nav-link active").addClass("nav-link");
     $("#aboutme").removeClass("nav-link active").addClass("nav-link");
     $("#allposts").removeClass("nav-link").addClass("nav-link active");
 }

 function aboutMe() {
     $('#zero-md').hide();
     $('.container-allstories').hide();
     $('.container-aboutme').show();
     $('.container-aboutme').load("pages/about.html");
     $("#home").removeClass("nav-link active").addClass("nav-link");
     $("#allposts").removeClass("nav-link active").addClass("nav-link");
     $("#aboutme").removeClass("nav-link").addClass("nav-link active");
 }

     <li class="nav-item">
         <a class="nav-link" id="allposts" onclick="allStories()" href="#">All posts</a>
     </li>
     <li class="nav-item">
         <a class="nav-link" id="aboutme" onclick="aboutMe()" href="#">About me</a>
     </li>

函数allStories（）{
$（'#zero md'）.hide（）；
$（'.container aboutme'）.hide（）；
$（'.container allstories'）.show（）；
$（'.container-allstories'）.load（“pages/allstories.html”）；
$（“#主页”）.removeClass（“导航链接激活”）.addClass（“导航链接”）；
$（“#aboutme”）.removeClass（“导航链接激活”）.addClass（“导航链接”）；
$（“#allposts”）.removeClass（“导航链接”）.addClass（“导航链接活动”）；
}
函数aboutMe（）{
$（'#zero md'）.hide（）；
$（'.container allstories'）.hide（）；
$（'.container aboutme'）.show（）；
$（'.container aboutme'）.load（“pages/about.html”）；
$（“#主页”）.removeClass（“导航链接激活”）.addClass（“导航链接”）；
$（“#allposts”）.removeClass（“导航链接激活”）.addClass（“导航链接”）；
$（“#aboutme”）.removeClass（“导航链接”）.addClass（“导航链接活动”）；
}

有没有更好、更有效的方法用更少的代码来组织此类活动

你是说这个

$（“#nav”）。在（“单击”，“导航链接”，功能（e）{
e、 preventDefault（）；//停止链接
const id=this.id；
const$thiscanner=$（'.container'+id）；
$（'#zero md'）.hide（）；
$（'.container'）.hide（）；//隐藏所有容器
$thisContainer.load（“pages/”+id+“.html”，function（）{//如果已经加载，可能不会加载
$thiscanner.fadeIn（“慢”）；
}) ;
$（“.nav link”）.removeClass（“活动”）
$（此）.addClass（“活动”）
})

是。尽量保持代码干爽（不要重复自己的代码）

在JS中添加事件侦听器。
使用

e.target

确定单击的内容。
当命令在同一元素上运行时，将它们链接在一起。
不要删除一个类，然后再重新添加同一个类。只要把你想扔掉的拿走

我添加了一些替代元素，因为不是所有内容都出现在HTML中

$（'.nav link'）。单击（（e）=>{
让theLink=$（e.target）.attr（'id'）；
const container='.container-'+$（theLink.attr（'id'）；
$（'#zero md'）.hide（）；
$（'.container'）.hide（）；
$（container.show（）.load（“pages/”+theLink+“.html”）；
警报（'loading:pages/'+theLink+'.html'）；
$（“#主页”）.removeClass（“导航链接激活”）.addClass（“导航链接”）；
$（“.nav link”）.removeClass（“活动”）；
$（“#”+theLink）.addClass（“活动”）；
});
.active{
字体大小：1.5rem；
}





所有故事
关于我
Zero MD
您面临的问题是什么？你能详细说明一下吗？每个按钮都应该有自己的事件，这意味着什么？这将直接结合到一个带有参数的函数中。你面临什么问题？（如上所述）。当您的代码看起来正常工作时，您可能希望继续询问