链接到具有不同参数jqm的当前页面

debugcn 发表于 Dev

格图

我正在用jquery mobile建立一个网页，并尝试用参数链接页面。这可行，但是我的问题是我无法链接到我当前使用不同参数的同一页面。

例子：

<html>
      <body>
            <!-- START INDEX PAGE -->
            <div data-role="page" id="index">
                 <div data-role="header">
                     <h1>Indexpage</h1>
                 </div>
                 <div data-role="content">
                     <a href="index.html#listpage?list=1">
                     <a href="index.html#listpage?list=2">
                 </div>
            </div>
            <!-- END INDEX PAGE -->


            <!-- START LIST PAGE (page to list content i.e. user list)-->
            <div data-role="page" id="listpage">
                 <div data-role="header>
                      <h1>Listpage</h1>
                 </div>
                 <div data-role="content">
                      <ul data-role="listview" id="listview">
                      </ul>
                 </div>
                 <script>
                      //to get passed parameter (list id)
                      $.urlParam = function(name){
                            var results = new RegExp('[\\?&]' + name + '=             ([^&#]*)').exec(window.location.href);
                            if (results==null){
                                return null;
                            } else {
                                return results[1] || 0;
                            }
                       }

                       var list = $.urlParam('list');
                       switch(list) {
                              case 1:
                                     //insert list one into page
                                     break;
                               case 2:
                                     //insert list two into page
                                     break;
                       }
                 </script>
            </div>
            <!-- END LIST PAGE -->
      </body>
</html>

因此，当我停留在list1上时单击list2链接时，它没有任何作用。

谢谢你的帮助

格图

所以我这样解决了：

首先，我将以pageint开头的开关更改为独立功能：

function displayContent(contentid) {
    switch(contentid) {
        case 1:
            //change content
            break;
        case 2:
            //change content
            break;
    }
}

然后，我更改了显示内容的方式：

$('#listpage-header-title').html('Alle Turner'); //change title on header

//CHANGED PART START
//check if navbar already exists                            
if($('#listpage-sub-nav ul').length != 0) {
    //remove activestate from all active buttons
    $('.ui-btn-active').removeClass('ui-btn-active');  
$('.ui-state-persist').removeClass('ui-state-persist');

    //add activestate to pushed button
    $('[onclick*="alle_tu"]').addClass('ui-btn-active');
    $('[onclick*="alle_tu"]').addClass('ui-state-persist');
} else {

    //if navbar doesn't exists add html code of the navbar
    $('#listpage-sub-nav').html('<ul><li><a href="index.html#turnerpage" data-role="tab" rel="external">Überblick</a></li><li><a href="#" onclick="displayContent(\'alle_tu\');" data-role="tab" class="ui-btn-active ui-state-persist">Turner</a></li><li><a href="#" onclick="displayContent(\'alle_ti\');" data-role="tab">Turnerinnen</a></li></ul>');
}
//CHANGED PART END

 //add autodivers to listview
 $('#list-page-listview').attr('data-autodividers', 'true');

 //change/add data to listview
 showTeilnehmer('listpageM');

 //refresh listview
 $('#list-page-listview').listview('refresh');
 break;

希望有人帮助

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。