静态html页面错误行为

Static html page misbehaviour

本文关键字：错误 html 静态      更新时间：2023-09-26

我有一个情况，试图实现这个代码依赖到一个静态的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;
        }
    });
});

and splash.css file:

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

有什么想法吗?

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

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

在script标签后面包含jQuery脚本，就在</head>上面。

jQuery是一个jQuery变量，在它被定义之前你正在使用它。

编辑:(感谢Muntashir Akon):

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

用google的jQuery文件代替自己的jQuery文件解决了OP的问题。

相关文章：