Javascript 使用不同参数jqm链接到当前页面_Javascript_Jquery_Jquery Mobile_Mobile

Javascript 使用不同参数jqm链接到当前页面

javascript jquery jquery-mobile mobile

Javascript 使用不同参数jqm链接到当前页面,javascript,jquery,jquery-mobile,mobile,Javascript,Jquery,Jquery Mobile,Mobile,我正在用jquery mobile构建一个网页，并尝试用参数链接网页。这是可行的，但我的问题是，我不能链接到同一页，我目前停留在不同的参数例如： <html> <body>  <div data-role="page" id="index"> <div data-role="header">

我正在用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>


指数膨胀
如果您使用的是同一页面，则可以在锚定标记的单击事件上附加html数据
或
所以我这样解决了它：
首先，我将从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;

$（'#listpage header title'）.html（'Alle Turner'）//更改标题上的标题
//更改部分开始
//检查导航栏是否已经存在
如果（$（'#列表页子导航ul'）。长度！=0）{
//从所有活动按钮中删除activestate
$（'.ui-btn-active'）.removeClass（'ui-btn-active'）；
$（'.ui-state-persist'）.removeClass（'ui-state-persist'）；
//将activestate添加到按下的按钮
$（'[onclick*=“alle_tu”]'）.addClass（'ui-btn-active'）；
$（'[onclick*=“alle_tu”]'）.addClass（'ui-state-persist'）；
}否则{
//若导航栏不存在，则添加导航栏的html代码
$（'listpage sub nav'）.html（'；
}
//更改部分结束
//将自动潜水员添加到listview
$（“#列表页列表视图”）.attr（'data-autodividers'，'true'）；
//更改/向listview添加数据
showteinehmer（'listpageM'）；
//刷新列表视图
$（“#列表页列表视图”）。列表视图（“刷新”）；
打破

希望有人帮助
将rel=external属性添加到anchor tah，在没有Ajaxrel=external的情况下加载它是不起作用的，因为它与其他参数是同一个jqm页面
$('#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;