javascript - 如果我加载另一个页面,我的 jQuery 将停止工作

标签 javascript jquery html css

我会全部重写,因为可能我没有很好地解释自己(抱歉我的英语不好)。
我有 2 个 html 页面:index.hmtl 和 info.html。
所有 html 页面都有一个带有页面名称的 div 和一个小菜单图标,当您单击该图标时,菜单会出现和消失(类似于 facebook 应用程序中的菜单)。为了切换可见和不可见,我切换了两个类。如果我打开我的 html.it 并单击菜单按钮,它运行良好,菜单会出现并消失。
菜单是一个链接到其他 html 页面的 ul。如果您单击一个链接,浏览器将加载该页面(例如 info.html),其上部具有相同的 div(页面名称和小图标)和不同的内容。如果我单击 info.html 页面中的图标菜单,则菜单的切换不起作用。如果我刷新 info.html 页面,菜单图标会显示和隐藏 ul 菜单。

我在所有页面中的代码(对于页眉部分)是:

<div id ="header-status" data-role="header" data-position="fixed" data-theme="a">
     <img id="menu" src="img/menu.png" /> <h2>Pas.si</h2>
 </div>

 <ul id="listamenu" class="classmenua">
     <li> <a href="index.html"> Percorsi </a> </li>
     <li>  <a href="info.html"> Info </a> </li>
     <li> <a href="ARworld.html"> World </a> </li>
 </ul>

 <div class="content">
 [..........]
 </div>

<script type="text/javascript">
        $('#menu').click(function() {
                         $('#listamenu').toggleClass('classmenub', 'classmenua');
                }
          );
 </script>

所用的 css 类位于所有 html 页面中加载的 css 文件中。这是这部分的 CSS:

#listamenu{ width:80%;
        height:100%;
        background-color:#0CF;
        margin:0;
        position:absolute;
        padding:0;
}
#listamenu li{ list-style:none;
            padding:10px;
            color:#fff;
}
#listamenu li a{ color:#fff;
            font-weight:normal;
}
#listamenu li:active{ color:#0CF;
            background-color:#fff;
}
.classmenua{ visibility:hidden;
        z-index:-1;
}
.classmenub{ visibility:visible;
        z-index:1;
}

返回错误;不起作用。
.toggleClass('classmenub classmenua') 用于切换菜单,但如果我进入另一个页面,则会出现相同的错误
控制台没有错误,我在 firefox 上测试,最后更新 :D
希望你现在能明白 XD 再次抱歉

最佳答案

如果我是对的,您唯一想做的就是切换菜单。而且切换按钮不是链接,所以我们不必使用 preventDefault 等东西。

我复制了你的代码并让它工作得很好。我想知道的是你究竟把 jQ i 放在哪里应该就在

以下示例适用于更改类。尝试使用此结构,看看它是否适合您。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id ="header-status" data-role="header" data-position="fixed" data-theme="a">
    <img id="menu" src="img/menu.png">
     <h2>Pas.si</h2>
 </div>

 <ul id="listamenu" class="classmenua">
     <li> <a href="index.html"> Percorsi </a> </li>
     <li>  <a href="info.html"> Info </a> </li>
     <li> <a href="ARworld.html"> World </a> </li>
 </ul>
<!-- Include javascript before the closing body tag </body> -->
<!-- jQuery include via CDN -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Here comes your own scipt (after the include) -->
<script type="text/javascript">
        $('#menu').click(function() {
                         $('#listamenu').toggleClass('classmenub', 'classmenua');
                }
          );
 </script>

</body>
</html>

当 jQuery 放在结束 body 标签之前时。如果 DOM 准备好加载,它将被触发。否则你需要使用:

$('document').ready(function(){
     //your code here
});

我更喜欢第一个选项。

关于javascript - 如果我加载另一个页面,我的 jQuery 将停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22096671/

相关文章:

javascript - 局部变量不覆盖同名参数?

javascript - 如何在 Laravel 中使用 ReactJS

jquery - 如何使用 jQuery 重新填充表单提交上的隐藏 CSV 字段

javascript - 如何从 html 字符串中获取 html 元素?

javascript - 动态添加html select另一个选择框选项的onClick

javascript - 在 querySelectorAll 调用的结果中搜索

javascript - FB.Connect.showPermissionDialog 后重定向的问题

jquery - bootstrap-wysihtml5-rails 自定义按钮

javascript - 用 jquery 替换图像的 src

html - 嵌入式YouTube视频无法在Google Chrome浏览器中播放