这与这个question有很大关系
我是 Web 开发的新手，非常努力，观看 YouTube 视频/Udemy/StackOverflow 寻找答案。不确定这是否重复。
我从这个 link 中挑选代码来编写菜单
我有这个 HTML 和两个 CDN(一个在 head 中，而 .js 在 body 中，如 YouTube 视频所示。不幸的是..正如我在语义 UI 网站上看到的那样，没有过渡，悬停事件正在运行。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
<div class="ui grid">
<div class="four wide column">
<div class="ui vertical fluid tabular menu">
<a class="active item">
Bio
</a>
<a class="item">
Pics
</a>
<a class="item">
Companies
</a>
<a class="item">
Links
</a>
</div>
</div>
<div class="twelve wide stretched column">
<div class="ui segment">
This is an stretched grid column. This segment will always match the tab height
</div>
</div>
</div>
</body>
</html>
我想更详细地解释我需要哪些其他 CDN，或者我需要哪些 JQuery、JavaScript、CSS 文件才能使这些转换工作。
我访问的页面是否解释了这一点？我知道非常基本的 JavaScript，我发现没有函数可以完成所有这些事件。
最佳答案
语义 UI 严重依赖于 JQuery，因此如果您想让它工作(在 JavaScript 部分)，您必须首先添加 Jquery js 文件，然后添加语义 UI js 文件，如 Get Started 所述语义 UI 的页面。 作为一种好的做法，请始终在 HTML 的底部添加 JS 文件，就在结束 body 标记之前。
这是您使用 JQuery 和语义 UI 的代码:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<title></title>
</head>
<body>
<div class="ui grid">
<div class="four wide column">
<div class="ui vertical fluid tabular menu">
<a class="active item">
Bio
</a>
<a class="item">
Pics
</a>
<a class="item">
Companies
</a>
<a class="item">
Links
</a>
</div>
</div>
<div class="twelve wide stretched column">
<div class="ui segment">
This is an stretched grid column. This segment will always match the tab height
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
</body>
</html>
使用Transition作为语义 UI 的模块，您必须像那里的示例一样使用 JQuery 调用它们。
我建议大家在学习Semantic UI之前，多多内化JQuery，主要是因为它的组件和模块的使用方式，都是相关的。查看Learn JQuery网页和CSS Tricks的视频教程。 之后，通过阅读包含所有部分的文档(例如 Dropdown)来更深入地挖掘语义 UI。模块有四个部分:定义、示例、用法和设置。
此外，在 Youtube 上观看“Semantic UI in 60 minutes”的视频可能有助于更好地了解语义 UI 的工作原理。
希望对您有所帮助。
关于javascript - 语义 UI 菜单中的转换和 onClick 操作不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52040519/