Блог

Я использую Bulma CSS для создания навигационного компонента в Svelte, и я хотел бы сделать каждый элемент навигационной панели жирным, если значение class:is-active равно true. В настоящее время я сделал следующее:

     <script>
    import {onMount} from 'svelte';
    let segment;
    
    onMount(() => {
        const linkOne = document.getElementById("linkOne");
        const linkTwo = document.getElementById("linkTwo");
        const linkThree = document.getElementById("linkThree");
        const linkFour = document.getElementById("linkFour");
        const linkFive = document.getElementById("linkFive");
        
        linkOne.addEventListener('focusin', (event) => {
            event.target.style["font-weight"] = 'bold';    
        });

        linkOne.addEventListener('blur', (event) => {
            event.target.style["font-weight"] = 'normal';    
        });
        
        linkTwo.addEventListener('focusin', (event) => {
            event.target.style["font-weight"] = 'bold';    
        });

        linkTwo.addEventListener('blur', (event) => {
            event.target.style["font-weight"] = 'normal';    
        });
        
        linkThree.addEventListener('focusin', (event) => {
            event.target.style["font-weight"] = 'bold';    
        });

        linkThree.addEventListener('blur', (event) => {
            event.target.style["font-weight"] = 'normal';    
        });
        
        linkFour.addEventListener('focusin', (event) => {
            event.target.style["font-weight"] = 'bold';    
        });

        linkFour.addEventListener('blur', (event) => {
            event.target.style["font-weight"] = 'normal';    
        });
        
        linkFive.addEventListener('focusin', (event) => {
            event.target.style["font-weight"] = 'bold';    
        });

        linkFive.addEventListener('blur', (event) => {
            event.target.style["font-weight"] = 'normal';    
        });
    });
</script>
<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a href="/" class="navbar-item">
        </a>
    </div>
    <div class="nav-menubar">
        <div class="navbar-menu">
            <a id="linkOne" href="/" class="navbar-item" class:is-active={segment === undefined}>LinkOne</a>
            <a id="linkTwo" href="/linkTwo" class="navbar-item" class:is-active={segment === "linktwo"}>LinkTwo</a>
            <a id="linkThree" href="/linkThree" class="navbar-item" class:is-active={segment === "linkthree"}>LinkThree</a>
            <a id="linkFour" href="/linkFour" class="navbar-item" class:is-active={segment === "linkfour"}>LinkFour</a>
            <a id="linkFive" href="/linkFive" class="navbar-item" class:is-active={segment === "linkfive"}> LinkFive</a>
        </div>
    </div>
</nav>
  

В Firefox (81.0) это приводит к тому, что ссылка становится выделенной жирным шрифтом в фокусе, но при переключении на другую ссылку и обратно одна и та же ссылка не становится выделенной жирным шрифтом, если не щелкнуть дважды. Кроме того, я не уверен, что это лучший способ задать стиль для этих компонентов. Может кто-нибудь предложить лучший способ сделать это?

Вы можете легко достичь этого в Svelte:

 <script>
  let current = 0;
</script>

<a
  on:click="{() => current = 1}"
  class:active="{current === 1}"
>Number 1</a>

<a
  on:click="{() => current = 2}"
  class:active="{current === 2}"
>Number 2</a>

<a
  on:click="{() => current = 3}"
  class:active="{current === 3}"
>Number 3</a>

<style>
  a {
    display: block;
  }

  .active {
    color: rgb(255, 133, 34);
    font-weight: bolder;
  }
</style>
  

Также вы можете узнать больше о: https://svelte.dev/tutorial/classes

Вместо этого вы можете заменить весь этот JavaScript одним простым правилом CSS:

 a:focus {
  font-weight: bold;
}