在 Svelte 組件中更改頂部導航時，如何始終默認為子導航的第一個選項卡？

Question

我有一個帶有幾個組件的 Svelte 應用程序。 一種用於頁面的主導航（Landing.svelte），一種用於子導航（LandingSubNav.svelte）。 當您單擊不同的頂部導航選項時，會出現不同的子導航項集。

它工作正常。 但是，我希望在更改頂部導航時始終默認為第一個子導航項。 我以為我可以通過在單擊事件中指定它來設置它（下面的代碼來自 Landing.svelte），但它不起作用。 非常感謝任何幫助。

    <nav id="navigation" />
    <div id="aspects">
      <button
        class="button statewide"
        on:click={() => {
          handleClick("statewide");
          $_tabSelect = "statewide";
          $_subTabSelect = 1;

完整的應用程序和代碼在 Codesandbox 上。

Answer 1

您可以在LandingSubNav.svelte中添加一個新的響應語句，該語句依賴於tabSelect ，它在更改時將activeTabValue重置為 1：

<script>
  import { _tabSelect, _subnavitems, _subTabSelect } from "./tab-store";

  // ...

  $: {
    tabSelect;
    activeTabValue = 1;
  }
</script>