CSS样式表中的jQuery答案

【问题标题】：jQuery in CSS style sheetCSS样式表中的jQuery
【发布时间】：2013-07-29 18:48:49
【问题描述】：

我正在努力让我的网站在每次单击另一个页面的链接时淡入淡出。我需要使用 jQuery 来做到这一点。我需要将 jQuery 代码放在每个页面上还是可以将 jQuery 写入 CSS 样式表？如果是这样，我如何格式化 CSS 样式表以接受 jQuery？

我正在试验这个论坛帖子中的代码：Fade Out between pages – CSS-Tricks

根据 cmets 编辑问题

所以，我现在知道我不能将 JavaScript 放入 CSS 文件中。将适用于网站所有页面的 JavaScript 代码放入其中的最佳方式是什么？我想编写此转换代码，然后不必将其写入/编辑到每个页面中。

【问题讨论】：

你的意思是你想把 JavaScript 添加到 CSS 文件中？如果是这样的话，那你不能。只有 CSS 文件中的 CSS :)
您将不得不处理某种包含该 js 文件的母版页。
FWIW，每个页面上的“淡入/淡出”效果对于大多数用户来说可能会相当烦人。

标签： javascript jquery html styles

【解决方案1】：

将 JavaScript 保存在扩展名为 .js 的文件中，例如 main.js。然后给它一个公共 URL，就像你的 CSS 文件可以从一个 URL 访问一样。示例 URL：http://example.com/js/main.js。您可以通过将其放在服务器上 public_html 文件夹中的 js 文件夹中来做到这一点 - 这取决于您的服务器。

然后，在每个页面的 HTML 末尾附近，在 </body> 的正上方，添加这个 HTML 标记：

<script src="/js/main.js"></script>

带有src 属性的script tag 将在给定的URL 加载JavaScript，然后立即运行。

我建议将其放在 <body> 元素的末尾而不是 <head> 内，因为脚本会在脚本运行时阻止页面的其余部分加载和显示给用户。如果您使脚本仅在页面的最后运行，则页面已经加载并且用户可以看到其所有内容。

【讨论】：

谢谢。它不仅有效，而且让我看到了 main.js 的许多可能性。

【解决方案2】：

你需要在window.beforeunload 事件上做一个$.fadeout，再见

PD：在 js 文件中，而不是在样式表中，您不能在样式表中使用 JS。再见。

【讨论】：