我正在将选项值实现到页面中，并且我想将其用作带有指向不同页面的链接的导航菜单。下面的代码确实在页面之间切换，但它立即将页面返回到 index.html 因此，您可以在几分之一秒内看到另一个页面，然后它又回到主页。请对此有任何想法吗？
我的代码如下:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- Start of index page -->
<div data-role="page" data-theme="b" id="index">
<div data-role="header" data-position="inline">
<h1>HOME</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-1"></label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="index.html">HOME</option>
<option value="#about">ABOUT</option>
<option value="#services">SERVICES</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-1').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>Home Page</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /index page -->
<!-- Start of about page -->
<div data-role="page" data-theme="b" id="about">
<div data-role="header" data-position="inline">
<h1>ABOUT</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-1"></label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="index.html">HOME</option>
<option value="#about">ABOUT</option>
<option value="#services">SERVICES</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-1').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>About Page</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /about page -->
<!-- Start of services page -->
<div data-role="page" data-theme="b" id="services">
<div data-role="header" data-position="inline">
<h1>SERVICES</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-1"></label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="index.html">HOME</option>
<option value="#about">ABOUT</option>
<option value="#services">SERVICES</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-1').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>Services Page, Services Page</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /services page -->
</body>
</html>
最佳答案
工作示例:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- Start of index page -->
<div data-role="page" data-theme="b" id="index">
<div data-role="header" data-position="inline">
<h1>HOME</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-1"></label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="index.html">HOME</option>
<option value="#about">ABOUT</option>
<option value="#services">SERVICES</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-1').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
$.mobile.changePage( url, { transition: "slide", changeHash: false });
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>Home Page</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /index page -->
<!-- Start of about page -->
<div data-role="page" data-theme="b" id="about">
<div data-role="header" data-position="inline">
<h1>ABOUT</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-1"></label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="index.html">HOME</option>
<option value="#about">ABOUT</option>
<option value="#services">SERVICES</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-1').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
$.mobile.changePage( url, { transition: "slide", changeHash: false });
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>About Page</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /about page -->
<!-- Start of services page -->
<div data-role="page" data-theme="b" id="services">
<div data-role="header" data-position="inline">
<h1>SERVICES</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-1"></label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="index.html">HOME</option>
<option value="#about">ABOUT</option>
<option value="#services">SERVICES</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-1').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
$.mobile.changePage( url, { transition: "slide", changeHash: false });
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>Services Page, Services Page</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /services page -->
</body>
</html>
您需要使用 jQuery Mobile 解决方案进行页面遍历:
$.mobile.changePage( url, { transition: "slide", changeHash: false });
关于javascript - jQuery Mobile 中作为链接的选项值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23769742/