1

問題を解決するために事前に感謝します...

次のリンクを見つけてください... http://jsfiddle.net/yesvin/KrKvb/

そしてコード...

<!DOCTYPE html>
<html>
    <head>
        <title>Jquery Mobile</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
            $(function() {
                $('ul.tabs-v, ul.tabs').each(function() {
                    var $active, $content, $links = $(this).find('a');
                    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
                    $active.addClass('ui-btn-active');
                    $content = $($active.attr('href'));

                    $links.not($active).each(function() {
                        $($(this).attr('href')).hide();
                    });

                    $(this).on('click', 'a', function(e) {
                        //alert($(this));
                        $active.removeClass('ui-btn-active');
                        $content.hide();
                        $active = $(this);
                        $content = $($(this).attr('href'));

                        $active.addClass('ui-btn-active');

                        $content.show();

                        e.preventDefault();
                    });
                });
            });

        </script>
    </head>
    <body>
        <div data-role="page">

            <div data-role="header" class="hea"  data-position="fixed">
                <h2>Header</h2>
            </div>

            <div data-role="content">
                <div style="width: 20%; float: left;">
                    <ul class="tabs-v" data-role="listview">
                        <li><a href="#tab1"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-bb.jpg" /> <h3>Link 1</h3> </a></li>
                        <li><a href="#tab2"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-bb.jpg" /> <h3>Link 2</h3> </a></li>
                        <li><a href="#tab3"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-bb.jpg" /> <h3>Link 3</h3> </a></li>
                    </ul>
                </div>

                <div style="width: 77%; float: right;">
                    <div id="tab1">Tab 1 Content</div>
                    <div id="tab2">Tab 2 Content</div>
                    <div id="tab3">Tab 3 Content</div>
                </div>

            </div>

            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#tab1">One</a></li>
                        <li><a href="#tab2">Two</a></li>
                        <li><a href="#tab3">Three</a></li>
                    </ul>
                </div>          
            </div>

        </div>      
    </body>
</html>

ヘッダー、フッター、コンテンツの左、右の列、およびナビゲーションバーを備えたjqueryモバイルタブ付きテンプレートがありました。ここで、左側の列 ul li は正常に機能し、jquery 関数を使用して id によって参照されるタブのコンテンツを表示します (ui-btn-active も正常に機能します)。

同じことがjquery mobile /のnavbarコンポーネントで機能していないか、機能している場合、現在のボタンはui-btn-activeクラスに置き換えられていません。

したがって、下部のナビゲーション バーのページを変更する必要はありません。

誰でもこれを整理するのを手伝ってくれますか?

4

1 に答える 1

1

それはこのように機能します。実際、これが私にとってどのように機能したかです。

まず、クラスタブをnavbar<ul>に追加する必要があります。

<div data-role="navbar">
  <ul class="tabs">

次に、ui-btn-active CSS スタイルをコピーします。

<style type="text/css">
.ui-btn-active-custom { /* any name */
border:1px solid #2373a5;
background:#5393c5;
font-weight:bold;
color:#fff;
cursor:pointer;
text-shadow:0 1px 1px #3373a5;
text-decoration:none;
background-image:-webkit-gradient(linear,left top,left bottom,from( #5393c5 ),to( #6facd5 ));
background-image:-webkit-linear-gradient( #5393c5,#6facd5 );
background-image:-moz-linear-gradient( #5393c5,#6facd5 );
background-image:-ms-linear-gradient( #5393c5,#6facd5 );
background-image:-o-linear-gradient( #5393c5,#6facd5 );
background-image:linear-gradient( #5393c5,#6facd5 );
font-family:Helvetica,Arial,sans-serif
}
</style>

JS コードで、allui-btn-activeを次のように置き換えます。ui-btn-active-custom

自分で試してみてください: http://jsfiddle.net/KrKvb/7/

于 2013-02-15T18:07:13.270 に答える