Question

'jquery-1.11.3.min.js'似乎导致导航栏中的链接无法正常工作。每当我尝试单击消息图标时，最下面会出现一行文字“错误加载页面”。我不知道如何解决这个问题。

这些是我运行

所需的脚本

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>

这是我的代码，对于写得不好而道歉我是初学者。

<body>

<!--HEADER-->
<div id="header">
    <nav>
        <ul>
            <div id="left"><li><a href="#menu" ><img src="images/user.svg" width="30px" alt="user"></a></li></div>
            <li id="centre" class="logo">EROS</li>
            <div id="right"><li><a href="message.html"><img src="images/message.svg" width="50px" alt="messages"></a></li></div>
        </ul>
    </nav>
</div>
<!--END HEADER-->

<!--MAIN-->
<div id="main">

    <div id="container">
        <div class="buddy" style="display: block;">
                <div class="avatar"  style="margin: 0 auto; display: block; background-image:url(images/girl1.jpg)"></div>
                    <div class="bio">
                    <h1>Name, 28</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
        </div>
        <div class="buddy">
            <div class="avatar" style="margin: 0 auto; display: block; background-image:url(images/flower1.png)"></div>
                <div class="bio">
            <h1>Steve, 28</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>

        </div>  

        <div class="buddy">
            <div class="avatar" style="margin: 0 auto; display: block; background-image:url(images/flower2.png)"></div>
                <div class="bio">
            <h1>Name, 28</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>

        </div>  
        <div class="buddy">
                <div class="avatar" style="margin: 0 auto; display: block; background-image:url(images/flower3.png)"></div>
                    <div class="bio">
                <h1>Name, 28</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>

        </div>  
   </div>


        <!--<div id="process">
            <canvas id="pjs"></canvas>
        </div>-->

            <div id="controls">
                <img src="images/bye.svg" alt="no" width="150px" class="bye">
                <img src="images/star.svg" alt="star" width="50px" class="star">
                <img src="images/hi.svg" alt="yes" width="150px" class="hi">
            </div>
</div>
<!--END MAIN-->

<script type="text/javascript">
$(document).ready(function(){

$(".buddy").on("swiperight",function(){
  $(this).addClass('rotate-left').delay(700).fadeOut(1);
  $('.buddy').find('.status').remove();
  $(this).append('<div class="status like">Like!</div>');   

  if ( $(this).is(':last-child') ) {
    $('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300);
   } else {
      $(this).next().removeClass('rotate-left rotate-right').fadeIn(400);
   }
  });  

 $(".buddy").on("swipeleft",function(){
  $(this).addClass('rotate-right').delay(700).fadeOut(1);
  $('.buddy').find('.status').remove();
  $(this).append('<div class="status dislike">Dislike!</div>');

  if ( $(this).is(':last-child') ) {
   $('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300);
 } else {
    $(this).next().removeClass('rotate-left rotate-right').fadeIn(400);
 } 
 });

 $(".bye").on("click", function(){
 $(".buddy").not(".rotate-left, .rotate-right").trigger("swipeleft");
 });
 $(".hi").on("click", function(){
 $(".buddy").not(".rotate-left, .rotate-right").trigger("swiperight");
 });
 });

</script>
</body>

非常感谢任何帮助。

这是控制台中显示的内容：

XMLHttpRequest cannot load file:///Volumes/Macintosh%20HD/Users/MYNAME/Desktop/eros/message.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
send    @   jquery-1.11.3.min.js:5
m.extend.ajax   @   jquery-1.11.3.min.js:5
(anonymous function)    @   jquery.mobile-1.4.4.min.js:3
a.widget._loadUrl   @   jquery.mobile-1.4.4.min.js:4
(anonymous function)    @   jquery.mobile-1.4.4.min.js:3
a.widget.change @   jquery.mobile-1.4.4.min.js:4
(anonymous function)    @   jquery.mobile-1.4.4.min.js:3
(anonymous function)    @   jquery.mobile-1.4.4.min.js:3
m.extend.each   @   jquery-1.11.3.min.js:2
m.fn.m.each @   jquery-1.11.3.min.js:2
a.fn.(anonymous function)   @   jquery.mobile-1.4.4.min.js:3
a.mobile.changePage @   jquery.mobile-1.4.4.min.js:4
(anonymous function)    @   jquery.mobile-1.4.4.min.js:4
m.event.dispatch    @   jquery-1.11.3.min.js:4
r.handle    @   jquery-1.11.3.min.js:4

Jquery导致'错误加载页'

0 个答案: