Javascript 如何突出显示svelte js中的活动导航栏链接

假设我在svelte js中有两个组件，一个是

Navbar

，另一个是

NavbarLink

。我想突出显示导航栏中当前活动的链接。到目前为止，我是使用jquery完成的：

$(".navbar").children(".nav-link").click(function(event){
   $(this).addClass("active");
   $(this).siblings().removeClass("active");
})

我是svelte js的新手，仍在学习基础知识。我也想在苗条的js中表现出这种行为。谁能告诉我最好的方法是什么吗？

<script>    
  let tabs = ["one", "two", "three"]
  let selected = tabs[0]
</script>

//your links
<li on:click={()=>selected = tabs[0]} class:selected={selected==="one"}>
<li on:click={()=>selected = tabs[1]} class:selected {selected==="two"}>
<li on:click={()=>selected = tabs[2]} class:selected={selected==="three"}>

//show if a specific tab is clicked
{#if selected === "one"}
..
{:else if selected === "two"}
..
{:else}
 ..
{/if}

<style>
  .active{
     //your css rules for active class
  }
</style>

让制表符=[“一”、“二”、“三”]
让选定项=选项卡[0]
//你的链接
selected=tabs[0]}class:selected={selected==“one”}>
selected=tabs[1]}class:selected{selected==“two”}>
selected=tabs[2]}class:selected={selected==“three”}>
//显示是否单击了特定选项卡
{#如果选择==“一”}
..
{：如果选择else==“两个”}
..
{:else}
..
{/if}
.主动{
//活动类的css规则
}

在苗条教程中添加和删除类：