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

Question

考虑我在 svelte js 中有两个组件，其中一个是 Navbar，另一个是 NavbarLink。我想在导航栏中突出显示当前活动的链接。到目前为止，我是使用 jquery 完成的：

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

我是 svelte js 的新手，还在学习基础知识。我也想在 svelte js 中获得这种行为。谁能告诉我最好的方法是什么？

Answer 1

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