2012-03-06 83 views
0

我有一個我正在使用的JQuery Mobile應用程序。在這個應用程序中,我有一個在頁腳中使用導航欄的頁面(http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-navbar.html)。這個導航欄有三個按鈕。JQuery Mobile - Navbar圖標不出現

出於某種原因,我第一次導航到頁面時,按鈕顯示默認加號。但是,如果我刷新頁面,或者通過頁腳中的其他按鈕之一瀏覽,我設置的圖標就會根據需要顯示。我如何製作它,以便導航欄始終顯示我指定的圖標?這是我的第一個頁面相關的代碼:我不知道,但也許增加

<style type="text/css"> 
    .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; } 
    .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }     

    #tab1 .ui-icon { background: url(/images/tab1.png) 50% 50% no-repeat; background-size: 24px 22px; } 
    #tab2 .ui-icon { background: url(/images/tab2.png) 50% 50% no-repeat; background-size: 24px 22px; }  
    #tab3 .ui-icon { background: url(/images/tab3.png) 50% 50% no-repeat; background-size: 24px 22px; }  

</style> 

<div id="tabsPage" data-role="page"> 
    <div data-role="header"> 
    </div> 

    <div data-role="footer" class="navbar"> 
    <div data-role="navbar" class="navbar" data-grid="d"> 
     <ul> 
     <li><a href="#" id="tab1" data-icon="custom" class="ui-btn-active">Tab 1</a></li> 
     <li><a href="/tab2" id="tab2" data-icon="custom" rel="external" defaultPageTransition="none">Tab 2</a></li> 
     <li><a href="/tab3" id="tab3" data-icon="custom" rel="external" defaultPageTransition="none">Tab 3</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

回答

0

您的href

class="ui-icon"? 

此刻,你的CSS目標中的一類UI圖標的tab3的id,或者取出.ui-icon或者將它添加爲你的href中的一個類。