语义 UI - 以下菜单示例

Question

我是语义新手 UI，我想实现以下菜单，如右侧 Semantic UI's documentation 所示。我想将此功能实现到固定的顶部菜单 - 因此当达到 header 元素的 id 时，应更改菜单中的活动元素。我正在查看 docs.js 的代码，其中为文档站点实现了此代码，但如果您是第一次使用语义 UI，则此代码非常复杂。我的菜单有类：ui large top fixed hidden menu

是否已经有 built-in 下面的菜单（可能没有，因为文档中没有提到它？）或者我用 jQuery 添加它？

Answer 1

semantic-ui 只给你样式。单击菜单项后，您可以更新该项目的活动状态。

这就是我们在代码中实现它的方式 -

const menuNav = $('.ui.menu.menu-component .item');
menuNav.on('click', function (item) {
  menuNav.removeClass('active');
  $(this).addClass('active');
});

另一件事要记住，您需要在页面加载时检查 URL，以便您可以将适当的项目标签设置为活动。

语义 UI - 以下菜单示例

Semantic UI - Following menu example

javascript

jquery

semantic-ui