jquerymobile listview锚标记不起作用

时间:2013-06-28 09:38:01

标签: jquery html5 jquery-mobile

我有一个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,它会起作用。

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

1 个答案:

答案 0 :(得分:0)

在这里工作正常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 -->