526互联

react菜单Menu导航栏实现

发布时间 2023-11-09 09:43:44作者: 分页需带参

react菜单Menu导航栏实现

//定义选中的下标
const [currentIndex, setCurrentIndex] = useState(initIndex)

//选中样式改变(tailwind)
  const getCurClass = (index) => {
    return currentIndex == index 
      ? 'hover:bg-blue-400 bg-blue-400 hover:text-gray-50 flex  h-[40px] px-3 cursor-pointer text-gray-200 items-center   space-x-3 '
      : 'hover:bg-blue-400 hover:text-gray-100 flex  h-[40px] px-3 cursor-pointer text-gray-600 items-center   space-x-3'
  }
  
  //点击某个标签将索引赋值给currentIndex
    const clickLabel = (index) => {
    setCurrentIndex(index)
  }

  {list?.length > 0 && list.map((items, indexs) => {
                      return (
                        <div
                          key={items.roomId}
                          className={getCurClass(index)}
                          onClick={() =>
                            clickLabel(index)
                          }
                        >
                          <span className="font-medium">
                            {items.roomName}
                          </span>
                        </div>
                      )
                    })}