Question

我遇到问题，或者如果我使用以下代码，我应该说整个列表中断

<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”来实现的。如果我从开胃菜部分删除列表代码，它的效果很好。

提前感谢您的帮助。

Answer 1

问题可能在于细分的排序。我不知道为什么它会像这样，但最后将标签段放在最后。 http://jsfiddle.net/toct7x0u/1/

 <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>

Jquery Mobile 2 ListView里面的Tab问题

1 个答案: