gpt4 book ai didi

javascript - 静态 html 页面错误行为

转载 作者:太空宇宙 更新时间:2023-11-04 11:29:15 27 4
gpt4 key购买 nike

我有一个情况试图实现这个 codepen进入静态 wordpress html 主页。

这是我的page-splash.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My sweet new splash page</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/splash_assets/splash.css">
<script type="text/javascript" src="http://www.neuegrid.com/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="http://www.neuegrid.com/wp-includes/js/jquery/ui/core.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/splash_assets/mynewmenu.js"></script>
</head>
<body>

<nav>
<ul>
<li><a href="http://www.neuegrid.com/">Home</a></li>
<li><a href="http://www.neuegrid.com/portfolio">Portfolio</a></li>
<li><a href="http://www.neuegrid.com/about-us/">About</a></li>
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg' />
</div>
<div>
Portfolio
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/>
</div>
<div>
About
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'/>
</div>
</div>
</nav>

</body>
</html>

此外,我还在与上述页面相同的目录中创建了一个文件夹 splash_assets,其中包含 mynewmeny.js:

// mynewmenu implementation
jQuery(function($){
var height, index, prevIndex;

$('nav ul li').mouseover(function(e){
//Set the aesthetics (similar to :hover)
$('nav ul li').removeClass('hovered');
$(this).addClass('hovered');

//Gets relevant data required for scrolling of menuRight
height = $("#menuRight").css("height").replace('px','');
index = $(this).index();

//If the category button (from the navlist) has changed
if (index != prevIndex){
$("#menuRight").stop();

$("#menuRight").animate({"scrollTop":height*index}, 800, 'easeOutBounce'); //This requires jQuery UI for easing options.
prevIndex = index;
}
});
});

splash.css文件:

body {
font: normal 1.0em Arial, sans-serif;
background: #A8CBFF;
}

nav {
font-size: 3.0em;
line-height: 1.0em;
color: white;

width:5em;
height: 9.0em;

position:absolute;
top:0; bottom:0;
margin:auto;
left: 0.5em;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav ul li {
background-color: blue;
height: 1.0em;
padding: 0.15em;
position: relative;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
-webkit-transition: -webkit-transform 200ms, background-color 200ms, color 200ms;
transition: transform 200ms, background-color 200ms, color 200ms;
}

nav ul li:nth-child(1) { background-color: gold;}
nav ul li:nth-child(2) { background-color: gold;}
nav ul li:nth-child(3) { background-color: gold;}


nav ul li.hovered {
background-color: black;
-webkit-transform: translateX(2.5em);
transform: translateX(2.5em);
}

nav ul li span {
display:block;
font-family: Arial;
position: absolute;
font-size:1em;
line-height: 1.25em;
height:1.0em;
top:0; bottom:0;
margin:auto;
right: 0.01em;
color: #F8F6FF;
}

a {
color: #FFF;
text-decoration: none;
}

/*new*/
#menuRight{
height:800px;
width:600px;
overflow:hidden;
position:relative;
left:450px;
top:-210px;

}
#menuRight div{
height:100%;
}
#menuRight img{
width:100%;
height:auto;
}

不幸的是,我的结果is not working就像它应该的那样。我在 Chrome 控制台中收到错误消息

Uncaught ReferenceError: jQuery is not defined

有什么想法,有什么问题吗?

最佳答案

要解决您的错误,请尝试将您的:

<script src="<?php echo get_template_directory_uri(); ?>/splash_assets/mynewmenu.js"></script>

在包含 jQuery 脚本的脚本标签之后,就在 </head> 之上.

jQuery是一个 jQuery 变量,您在定义它之前使用它。

编辑:(感谢 Muntashir Akon):

然后,OP 出现了这个错误:Uncaught TypeError: m.easing[this.easing] is not a function

用谷歌的文件替换他自己的 jQuery 文件解决了 OP 的问题。

关于javascript - 静态 html 页面错误行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32149068/

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