gpt4 book ai didi

javascript - 在 Javascript 之前加载 CSS

转载 作者:行者123 更新时间:2023-11-28 15:19:44 24 4
gpt4 key购买 nike

我设计了自定义导航栏/菜单。它目前从我的 style.css 调用 CSS,使用的 JS 包含在使用以下设置的 PHP 文件中

 <link rel="stylesheet" href="style.css" type="text/css">
<nav> ... </nav>
<script>
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');

});
});
jQuery(document).ready( function ( $ ){
$(".change>a").hover( function () {
$(this)[0].click();
},
function () {
/* code for mouseout */
});
});
</script>

内部 JS 似乎导致 CSS 加载出现问题。

有什么方法可以在 JS 之前加载调用的 CSS,同时保持原样,而不将 Javascript 放在单独的 .js 工作表上?

到目前为止已经尝试过:

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="initNavigation()">
<nav> ... </nav>
<script>
function initNavigation() {
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');
});
});
jQuery(document).ready( function ( $ ){
$(".change>a").hover( function () {
$(this)[0].click();
},
function () {
/* code for mouseout */
});
});
}
</script>
</body/>

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<nav> ... </nav>
<script>
window.onload=function(){
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');
});
});
jQuery(document).ready( function ( $ ){
$(".change>a").hover( function () {
$(this)[0].click();
},
function () {
/* code for mouseout */
});
});
}
</script>
</body/>

谁能告诉我哪里做错了?我认为它是 .ready 部分,但如果是,不确定如何在不影响 JS 工作方式的情况下摆脱它?

如果我将 JS 移到头部并将其放在 CSS 下方,可能会有不同吗?

最佳答案

只需在您的 body 标记中使用 onload 事件并将您的 js 包装在一个函数中。

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="initNavigation()">

<nav></nav>

<script>
function initNavigation() {
// your script goes here
}
</script>
</body>

关于javascript - 在 Javascript 之前加载 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46423595/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com