Question

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

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

我是精简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>

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

1 个答案: