1

HTML5、backbone.js、phonegap、topcoat.io を使用してモバイル アプリを作成しています。リスト項目全体をクリック可能にしたい。現時点で私は持っています：

<ul class="topcoat-list">


    <li class="topcoat-list__item">

        <a href="#teams">Teams</a>
    </li>

    <li class="topcoat-list__item">

        <a href="#games/1">Upcoming Fixtures</a>

    </li>

</ul>

ただし、ユーザーはリスト項目のどこかではなく、「チーム」に触れる必要があります。リスト項目全体をクリック可能にするために、アンカー タグで囲みます。

    <a href="#teams">
        <li class="topcoat-list__item">

            Teams
        </li>
    </a>

    <a href="#games/1">
        <li class="topcoat-list__item">

        Upcoming Fixtures
        </li>
    </a>

これは正しいアプローチですか？動作しますが、汚れているようです...

4

3 に答える 3

3

アンカーをブロックとして表示します。

ul,li {
   list-style: none;
   margin: 0;
   padding: 0;
}
a {
   display: block;
   width: 100%;
   height: 100%;
}

また、このfiddleを確認してください。

高さ/幅またはパディングを追加して、リンクを大きくすることができます。

于 2013-09-04T14:24:07.770 に答える
0

これは有効な HTML ではありませんが、アンカーをブロックとして表示するとうまくいくはずです。

a#teams{display:block}
于 2013-09-04T14:22:24.900 に答える
0 
<li class="topcoat-list__item">
    <a href="#teams">Teams</a>
</li>
<li class="topcoat-list__item">
     <a href="#games/1">Upcoming Fixtures</a>
</li>

または、JS .click() 関数を使用します

于 2013-09-04T14:19:46.770 に答える