选项值作为jQuery Mobile中的链接

时间：2014-05-20 20:53:11

标签： javascript jquery jquery-mobile

我正在将选项值实现到页面中，我想将其用作导航菜单，其中包含指向不同页面的链接。下面的代码确实在页面之间切换，但它会立即将页面返回到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>

1 个答案:

答案 0 :(得分：2)

工作示例：

<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 });
相关问题
最新问题