在被选中后,如何在菜单中显示选中的项目取决于具体的前端开发框架或库。以下是一种常见的实现方式:
以下是一个简单的示例代码(使用React框架):
import React, { useState } from 'react';
const Menu = () => {
const [selectedItem, setSelectedItem] = useState(null);
const handleItemClick = (item) => {
setSelectedItem(item);
};
return (
<ul>
<li className={selectedItem === 'item1' ? 'selected' : ''} onClick={() => handleItemClick('item1')}>
Item 1
</li>
<li className={selectedItem === 'item2' ? 'selected' : ''} onClick={() => handleItemClick('item2')}>
Item 2
</li>
<li className={selectedItem === 'item3' ? 'selected' : ''} onClick={() => handleItemClick('item3')}>
Item 3
</li>
</ul>
);
};
export default Menu;
在上述示例中,通过useState钩子函数创建了一个名为selectedItem的状态变量,用于存储当前选中的项目。每个菜单项都根据selectedItem的值来判断是否应该添加selected类名,以实现选中状态的样式变化。当用户点击菜单项时,通过handleItemClick函数更新selectedItem的值,从而实现选中项目的更新。
请注意,上述示例仅为演示目的,实际实现可能因具体的前端框架或库而有所不同。具体的实现方式应根据项目需求和技术栈进行调整。
领取专属 10元无门槛券
手把手带您无忧上云