将指示器边框应用于react本机选项卡导航中的选定选项卡

import React, { useState } from 'react';

const TabNavigation = () => {
  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabClick = (index) => {
    setSelectedTab(index);
  };

  return (
    <div className="tab-navigation">
      <div className="tabs">
        <div
          className={`tab ${selectedTab === 0 ? 'selected' : ''}`}
          onClick={() => handleTabClick(0)}
        >
          Tab 1
        </div>
        <div
          className={`tab ${selectedTab === 1 ? 'selected' : ''}`}
          onClick={() => handleTabClick(1)}
        >
          Tab 2
        </div>
        <div
          className={`tab ${selectedTab === 2 ? 'selected' : ''}`}
          onClick={() => handleTabClick(2)}
        >
          Tab 3
        </div>
      </div>
    </div>
  );
};

export default TabNavigation;

.tab {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.tab.selected {
  border-bottom: 2px solid blue;
}

.tab:hover {
  background-color: lightgray;
}

.tab-navigation {
  margin-bottom: 20px;
}