抱歉，標(biāo)題不好。我在我的大網(wǎng)站上有3個盒子。所以在我的三個盒子的電話版本中。它們合二為一，您可以從頂部的選項卡中選擇您想要查看的輸入。它們都有懸停和聚焦效果，使它們看起來漂亮而聰明。但是，當(dāng)您加載頁面時，它們都被切換到未選中的位置。所以我在每個按鈕上有3個白色背景。我希望第一個按鈕被預(yù)選為活動的。所以當(dāng)你加載頁面時，背景顏色是不同的。如果我這樣做，它會看起來更好等等。我想不通。我用的是順風(fēng)，它只適合手機大小的屏幕

.control__button {
@apply capitalize border-2 rounded-md text-center px-4 py-2 text-eco-green 
bg-white border-eco-green hover:bg-eco-green-med hover:border-eco-green-dark 
hover:text-white focus:bg-eco-green focus:border-eco-green-dark focus:text-white     
focus:hover:text-slate-200 dark:bg-black dark:text-eco-green font-poppins
}

<section className='grid border-2 border-eco-green rounded-md'>
        <div className='grid grid-cols-3 p-1 gap-1 '>
          <button
            className='control__button focus-within'
            onClick={() => {
              setElementSelected(AboutSections[0]);
            }}
          >
            People
          </button>
          <button
            className='control__button'
            onClick={() => {
              setElementSelected(AboutSections[1]);
            }}
          >
            Earnings
          </button>
          <button
            className='control__button'
            onClick={() => {
              setElementSelected(AboutSections[2]);
            }}
          >
            Projects
          </button>
        </div>

        {/* Articles  */}
        <article>
          <AboutElement elementSelected={elementSelected} />
        </article>
      </section>

您應(yīng)該為按鈕使用一個組件，然后循環(huán)這些按鈕，因為您在重復(fù)自己。但是當(dāng)你做的時候，簡單地申請。通過JS將焦點()指向循環(huán)中的第一個按鈕元素。然后，這將選取通過順風(fēng)應(yīng)用的公用事業(yè)類，如focus:bg-eco-green。顯示了一個普通的JS示例。選擇按鈕出現(xiàn)的部分，循環(huán)按鈕，首先聚焦。

const section = document.querySelector("section.border-eco-green");
section.querySelectorAll("button");
button[0].focus();

干是堅持btw的好標(biāo)準(zhǔn)，會很好的為你服務(wù)。

如果你也必須點擊那個按鈕并使它成為焦點，你可以添加。也單擊()

const section = document.querySelector("section.border-eco-green");
section.querySelectorAll("button");
button[0].focus();
button[0].click();

這里的要點是，Tailwind不會設(shè)置一個項目的默認(rèn)焦點狀態(tài)，你必須自己做。它將觀察焦點狀態(tài)一旦設(shè)置。

還要記住，focus(作為一個HTML標(biāo)準(zhǔn))只適用于交互式元素，如按鈕、輸入、選擇——它適用于div，但只有它的

tabindex="1"

已應(yīng)用。