静态HTML页面行为异常
[英]Static html page misbehaviour
问题描述
我遇到一种情况，试图将此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;
}
不幸的是，我的结果无法正常工作 。 我在Chrome控制台中收到一个错误
Uncaught ReferenceError: jQuery is not defined
有什么想法，怎么了？
1 个解决方案
解决方案1
1 已采纳 2015-08-21 20:56:56
要解决您的错误，请尝试将您的：
<script src="<?php echo get_template_directory_uri(); ?>/splash_assets/mynewmenu.js"></script>
在</head>上方的包含jQuery脚本的脚本标签之后。
jQuery是一个jQuery变量，您需要在定义它之前就使用它。
编辑：（感谢Muntashir Akon ）：
然后，OP出现此错误： Uncaught TypeError: m.easing[this.easing] is not a function
用Google的文件替换自己的jQuery文件解决了OP的问题。
Django中的静态html页面
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.