我会全部重写,因为可能我没有很好地解释自己(抱歉我的英语不好)。
我有 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/