Question

我有一个listview（jquerymobile），其中有5个<ul> <li>个项目如下 -

    <div class="ticketsBlock" data-theme="a">      
        <ul data-role="listview" data-inset="true">
 <li><a href="#custDetails" style="text-decoration:none" data-transition="slide"><p>John Smith</p><p>2 Cadeau Terr London ON N6K 4G1</p><br/><p>Issue with set-top box</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Sylvester Stallone</p><p>64 Faywood Dr Brampton ON L6Y 4L95</p><br/><p>New Connection</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Antenna Replacement</p><p>14 Grand St Brantford ON N3R 4B1</p><br/><p>New Connection</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Keanu Reaves</p><p>5617 Fourth Line Hillsburgh ON N0B 1Z0</p><br/><p>Distorted Display</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Tom Cruise</p><p>RR5 Perth ON K7H 3C7</p><br/><p>Issue with set-top box</p></a></li>
</ul>                
        </div>

每个<li>中的href指的是同一HTML页面中的div标记，其数据角色为“page” -

<div data-role="page" id="custDetails" data-theme="a">
   <button class="ui-btn-left" id="backbutton" data-icon="arrow-l" data-iconpos="left">Back</button>
    <h1>XXX</h1>
    <button class="ui-btn-right" id="exit" data-icon="back" data-iconpos="right">Exit</button>
  <div data-role="content"> Content </div>
 <div data-role="footer" data-theme="a" class="ui-footer-fixed">
    <h4>myFooter</h4>
  </div>
</div>

根据JQM的标准，这个html页面有不同的div-s，其数据角色为“page”。现在，当我点击引用div（数据角色为页面）的列表项时，它不会导航到该div。

但是，是的，如果我在同一个HTML页面中提供链接到不同的HTML页面而不是div，它会起作用。

任何人，请告诉我这种方法存在问题的地方？这种方法会起作用吗？

Answer 1

在这里工作正常DEMO http://jsfiddle.net/yeyene/ttjGv/2/

它转到那个div。检查下面的html标记。

<div data-role="page">
    <div id="my-header" data-role="header" data-position="fixed">            
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div data-role="content">
            <div class="ticketsBlock" data-theme="a">      
        <ul data-role="listview" data-inset="true">
 <li><a href="#custDetails" style="text-decoration:none" data-transition="slide"><p>John Smith</p><p>2 Cadeau Terr London ON N6K 4G1</p><br/><p>Issue with set-top box</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Sylvester Stallone</p><p>64 Faywood Dr Brampton ON L6Y 4L95</p><br/><p>New Connection</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Antenna Replacement</p><p>14 Grand St Brantford ON N3R 4B1</p><br/><p>New Connection</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Keanu Reaves</p><p>5617 Fourth Line Hillsburgh ON N0B 1Z0</p><br/><p>Distorted Display</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Tom Cruise</p><p>RR5 Perth ON K7H 3C7</p><br/><p>Issue with set-top box</p></a></li>
</ul>                
        </div>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
</div><!-- page -->

jquerymobile listview锚标记不起作用

1 个答案: