Jquery mobile Jquery Mobile 2 ListView内部选项卡问题

我有问题，或者如果我使用下面的代码，我应该说整个列表都会中断

<div data-role="content" class="ui-content-menu">
            <div data-role="tabs">
                <div id="one" class="tablist-content">
                    <h1>APPETIZER</h1>
                    <ul data-role="listview">
                       <li><a href="acura.html">Acura</a></li>
                       <li><a href="audi.html">Audi</a></li>
                       <li><a href="bmw.html">BMW</a></li>
                    </ul>
                </div>
                <div id="two" class="tablist-content">
                    <h1>Second tab contents</h1>
                </div>
                <div id="three" class="tablist-content">
                    <h1>third tab contents</h1>
                </div>
                 <div id="four" class="tablist-content">
                    <h1>First tab contents</h1>
                </div>
                <div id="five" class="tablist-content">
                    <h1>Second tab contents</h1>
                </div>
                <div id="six" class="tablist-content">
                    <h1>third tab contents</h1>
                </div>
                 <div id="seven" class="tablist-content">
                    <h1>First tab contents</h1>
                </div>
                <div id="eight" class="tablist-content">
                    <h1>Second tab contents</h1>
                </div>


                 <ul data-role="listview" class="tablist-right" data-icon="false">
                  <li><a href="#one"><div><img alt="Appetizers" src="images/Icons/Ic_Appetizer_54.png"/><h3 class="cat-heading">APPETIZER</h3></div></a></li>
                  <li><a href="#two"><div><img alt="Main Course" src="images/Icons/Ic_MainCourse_54.png"/><h2 class="cat-heading">MAIN</h2></div></a></li>
                  <li><a href="#three"><div><img alt="Sides" src="images/Icons/Ic_Sides_54.png"/><h2 class="cat-heading">SIDES</h2></div></a></li>
                  <li><a href="#four"><div><img alt="Dessert" src="images/Icons/Ic_Desserts_54.png"/><h2 class="cat-heading">DESSERT</h2></div></a></li>
                  <li><a href="#five"><div><img alt="Set Meals" src="images/Icons/Ic_SetMeals_54.png"/><h2 class="cat-heading">SET MEALS</h2></div></a></li>
                  <li><a href="#six"><div><img alt="Drinks" src="images/Icons/Ic_Drinks_54.png"/><h2 class="cat-heading">DRINKS</h2></div></a></li>
                  <li><a href="#seven"><div><img alt="Alcohol" src="images/Icons/Ic_Alcohol_54.png"/><h2 class="cat-heading">ALCOHOL</h2></div></a></li>
                  <li><a href="#eight"><div><img alt="Coffee" src="images/Icons/Ic_Coffee_54.png"/><h2 class="cat-heading">COFFEE</h2></div></a></li>
                </ul>
            </div>
        </div>

开胃菜





第二个选项卡内容
第三个选项卡内容
第一个选项卡内容
第二个选项卡内容
第三个选项卡内容
第一个选项卡内容
第二个选项卡内容

我目前想要实现的是选项卡内的列表-正如您所看到的，该选项卡本身是使用data role=“list view”构建的。如果我从开胃菜部分删除列表代码，效果会很好

---

请提前感谢您的帮助。

问题可能在于片段的顺序。我不知道为什么它会这样，但把标签段放在最后是可行的

开胃菜





第二个选项卡内容
第三个选项卡内容
第一个选项卡内容
第二个选项卡内容
第三个选项卡内容
第一个选项卡内容
第二个选项卡内容

您没有使用jQM选项卡小部件吗？它在列表中使用了data role=“navbar”：看看这是否对您有效谢谢@AtanuCSE这成功了，我实际上无法理解区别是什么？问题在于片段的顺序。不知何故，当您在列表段之前排序选项卡段时，JQM会感到困惑。我把它贴出来作为答案。

 <div data-role="content" class="ui-content-menu">
        <div data-role="tabs" id="my_tabs">

             <ul data-role="listview" class="tablist-right" data-icon="false" id="listss">
              <li><a href="#one"><div><img alt="Appetizers" src="images/Icons/Ic_Appetizer_54.png"/><h3 class="cat-heading">APPETIZER</h3></div></a></li>
              <li><a href="#two"><div><img alt="Main Course" src="images/Icons/Ic_MainCourse_54.png"/><h2 class="cat-heading">MAIN</h2></div></a></li>
              <li><a href="#three"><div><img alt="Sides" src="images/Icons/Ic_Sides_54.png"/><h2 class="cat-heading">SIDES</h2></div></a></li>
              <li><a href="#four"><div><img alt="Dessert" src="images/Icons/Ic_Desserts_54.png"/><h2 class="cat-heading">DESSERT</h2></div></a></li>
              <li><a href="#five"><div><img alt="Set Meals" src="images/Icons/Ic_SetMeals_54.png"/><h2 class="cat-heading">SET MEALS</h2></div></a></li>
              <li><a href="#six"><div><img alt="Drinks" src="images/Icons/Ic_Drinks_54.png"/><h2 class="cat-heading">DRINKS</h2></div></a></li>
              <li><a href="#seven"><div><img alt="Alcohol" src="images/Icons/Ic_Alcohol_54.png"/><h2 class="cat-heading">ALCOHOL</h2></div></a></li>
              <li><a href="#eight"><div><img alt="Coffee" src="images/Icons/Ic_Coffee_54.png"/><h2 class="cat-heading">COFFEE</h2></div></a></li>
                 </ul>
            <div id="one" class="tablist-content">
                <h1>APPETIZER</h1>

                <ul data-role="listview" id="list" data-inset="true">
                   <li><a href="acura.html">Acura</a></li>
                   <li><a href="audi.html">Audi</a></li>
                   <li><a href="bmw.html">BMW</a></li>
                    </ul> 
            </div>
            <div id="two" class="tablist-content">
                <h1>Second tab contents</h1>
            </div>
            <div id="three" class="tablist-content">
                <h1>third tab contents</h1>
            </div>
             <div id="four" class="tablist-content">
                <h1>First tab contents</h1>
            </div>
            <div id="five" class="tablist-content">
                <h1>Second tab contents</h1>
            </div>
            <div id="six" class="tablist-content">
                <h1>third tab contents</h1>
            </div>
             <div id="seven" class="tablist-content">
                <h1>First tab contents</h1>
            </div>
            <div id="eight" class="tablist-content">
                <h1>Second tab contents</h1>
            </div>


        </div>
    </div>