静态html页面行为不端

问题描述：

我有一种情况，试图将这个codepen转换为静态wordpress html主页。静态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; 
}

不幸的是，m y结果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

由谷歌的那些解决了OP的问题，更换了自己的jQuery文件。

谢谢，但翻转图像不起作用（只有菜单正在工作，但有一些错误），你可以请看看吗？ –

编辑你的文章，并添加它们，如果你不能自己解决它们的话） – Lauromine

像这样的权利？我编辑了这篇文章，并将page-splash.php上传到服务器;但不幸的是，翻转图像仍然无法正常工作。'未捕获的TypeError：m.easing [this.easing]不是一个函数的任何想法？ :) –

静态html页面行为不端

相关推荐