История изменений

Исправление ddidwyll, 08.07.20 16:23 (текущая версия) :

<script>
  let activeTab;
  const tabs = [1, 2, 3]
</script>

<nav>
  {#each tabs as t}
    <button 
      on:click={() => activeTab = t} 
      disabled={activeTab === t}
    >
      tab {t}
    </button>
  {/each}
</nav>

<section>
  <div hidden={activeTab !== 1}>
    First tab content
  </div>

  <div hidden={activeTab !== 2}>
    Second tab content
  </div>

  <div hidden={activeTab !== 3}>
    Third tab content
  </div>
</section>

<style>
  button[disabled] {
    border-color: red;
  }
  div[hidden] {
    display: none;
  }
</style>

Не лучший пример, но всё же

https://svelte.dev/repl/6039838d11794396b2d1556d9ac4854f?version=3.24.0

Исправление ddidwyll, 08.07.20 16:18:

<script>
  let activeTab;
  const tabs = [1, 2, 3]
</script>

<nav>
  {#each tabs as t}
    <button 
      on:click={() => activeTab = t} 
      disabled={activeTab === t}
    >
      tab {t}
    </button>
  {/each}
</nav>

<section>
  {#if activeTab === 1}
    <div>
      First tab content
    </div>
  {/if}

  {#if activeTab === 2}
    <div>
      Second tab content
    </div>
  {/if}

  {#if activeTab === 3}
    <div>
      Third tab content
    </div>
  {/if}
</section>

<style>
  button[disabled] {
    border-color: red;
  }
</style>

Не лучший пример, но всё же

https://svelte.dev/repl/6039838d11794396b2d1556d9ac4854f?version=3.24.0

Исправление ddidwyll, 08.07.20 16:17:

<script>
  let activeTab;
  const tabs = [1, 2, 3]
</script>

<nav>
  {#each tabs as t}
    <button 
      on:click={() => activeTab = t} 
      disabled={activeTab === t}
    >
      tab {t}
    </button>
  {/each}
</nav>

<section>
  {#if activeTab === 1}
    <div>
      First tab content
    </div>
  {/if}

  {#if activeTab === 2}
    <div>
      Second tab content
    </div>
  {/if}

  {#if activeTab === 3}
    <div>
      Third tab content
    </div>
  {/if}
</section>

<style>
  button[disabled] {
    border-color: red;
  }
</style>

Не лучший пример, но всё же

Исправление ddidwyll, 08.07.20 16:12:

<script>
  let activeTab;
  const tabCount = 3
</script>

<nav>
  {#each Array(tabCount) as _, i}
    <button 
      on:click={() => activeTab = i} 
      disabled={activeTab === i}
    >
      tab {++i}
    </button>
  {/each}
</nav>

<section>
  {#if !activeTab}
    <div>
      First tab content
    </div>
  {/if}

  {#if activeTab === 1}
    <div>
      Second tab content
    </div>
  {/if}

  {#if activeTab === 2}
    <div>
      Third tab content
    </div>
  {/if}
</section>

<style>
  button[disabled] {
    border-color: red;
  }
</style>

Не лучший пример, но всё же

Исходная версия ddidwyll, 08.07.20 16:09:

<script>
  let activeTab;
  const tabCount = 3
</script>

<nav>
  {#each Array(tabCount) as _, i}
    <button 
      on:click={() => activeTab = i} 
      disabled={activeTab === i}
    >
      {++i}
    </button>
  {/each}
</nav>

<section>
  {#if !activeTab}
    <div>
      First tab content
    </div>
  {/if}

  {#if activeTab === 1}
    <div>
      Second tab content
    </div>
  {/if}

  {#if activeTab === 2}
    <div>
      Third tab content
    </div>
  {/if}
</section>

<style>
  button[disabled] {
    border-color: red;
  }
</style>

Не лучший пример, но всё же