Question

我正在使用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链接，它什么也没做。

感谢您的帮助

Answer 1

You can append html data on click event of anchor tag if you are using same page 
OR
<a href="index.html#listpage?list=1" data-ajax="false">
<a href="index.html#listpage?list=2" data-ajax="false">
OR
$(document).delegate("a", "vclick click", function(event) {
  $.mobile.defaultPageTransition = "slide";                
  var href = $(this).attr("href");
  event.preventDefault();
  if ( event === "click" ) { return; }                      
  $.mobile.changePage(href);
});
 **PAGE-1**
<div data-role="page" id="index">      
<div data-role="header"> </div>

<div data-role="content">
    <a href="#list1"  data-transition="slide" data-role="none">List 1</a>
    <a href="#list2" data-transition="slide" data-role="none">List 2</a>
</div><!-- /content -->      

  <div data-role="footer">              
 </div> 
</div><!-- /page1 -->   

<div data-role="page" id="list1">      
   <div data-role="header"> </div>

    <div data-role="content">
    </div><!-- /content -->      

    <div data-role="footer">              
     </div> 
</div><!-- /List page1 --> 

<div data-role="page" id="list2">      
    <div data-role="header"> </div>

    <div data-role="content">        
     </div><!-- /content -->      

     <div data-role="footer">              
      </div> 
</div><!-- /List page2 -->

Answer 2

所以我这样解决了：

首先，我将从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;

希望有人帮忙

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

2 个答案: