如何使用導航欄作爲標籤的jQuery Mobile的

這是下面的代碼，我嘗試了小提琴 Jsfiddle code 如何使用導航欄作爲標籤的jQuery Mobile的

<div data-role="navbar"> 
<ul> 
    <li><a href="#tab-1">Tab1</a></li> 
    <li><a href="#tab-2">Tab2</a></li> 
    <li><a href="#tab-3">Tab3</a></li> 
</ul> 
</div> 

<div data-role="content"> 
    <div id="tab-1"> 
     <h2>Here is the first tab</h2> 
    </div> 

    <div id="tab-2"> 
     <h2>Here is the second tab</h2> 
    </div> 
    <div id="tab-3"> 
     <h2>Here is the third tab</h2> 
    </div> 
</div>

我需要顯示的第一個選項卡&其默認
我需要的內容隱藏其他選項卡的內容當一個特定選項卡顯示時

如何操作？

來源

2012-02-23 Coder_sLaY

它是一個JQuery的移動小部件..你可以在這裏查看http://jquerymobile.com/test/docs/toolbars/docs-navbar.html – 2012-02-23 13:19:58

你不必另外包含任何東西？只是jQuery 1.7.1？ – dynamic 2012-02-23 13:27:12

我們需要包括jquery.mobile-1.0.1.min.js，jquery.mobile-1.0.1.min.css＆jQuery 1.7.1，用於jquery mobile的工作:) – 2012-02-23 13:29:25

這不是我的代碼，但如果你導航第1頁的頁腳導航欄具有標籤：

http://jsfiddle.net/E86M9/3/

相關問題：

jQuery Mobile: data-rel="back" + data-transition does not work?

來源

2012-02-24 01:03:32

中被棄用，在那個小提琴示例中，導航欄實際上只是一個普通的導航欄......它並不真正做任何'tab-ish'。通常，選項卡可避免頁面更改，但在該示例中，「頁面」仍在更改，除了有一個點擊監聽器處理它而不是允許jqm的內置處理程序。 – dsdsdsdsd 2013-07-04 09:46:01

在標題中包含導航欄。像

<div data-role="header" > 

    <h1>Title</h1> 
    <div data-role="navbar" id="mk_item_actions"> 
<ul> 
    <li><a href="#tab-1">Tab1</a></li> 
    <li><a href="#tab-2">Tab2</a></li> 
    <li><a href="#tab-3">Tab3</a></li> 
</ul> 

    </div> 
</div><!-- /header --> 


<div data-role="content"> 

</div><!-- /content -->

然後，它會按你想要的方式工作。但是你仍然需要處理標籤內容div的隱藏和顯示。沒有別的辦法。

來源

2012-02-23 13:42:35 ghostCoder

嘗試此，

<div data-role="navbar"> 
    <ul> 
    <li><a href="#tab-1" onclick="ShowHide(this)">Tab1</a></li> 
    <li><a href="#tab-2" onclick="ShowHide(this)">Tab2</a></li> 
    <li><a href="#tab-3" onclick="ShowHide(this)">Tab3</a></li> 
    </ul> 
</div> 

<div data-role="content" class="content"> 
    <div id="tab-1" class="tab"> 
     <h2>Here is the first tab</h2> 
    </div> 
    <div id="tab-2" class="tab"> 
     <h2>Here is the second tab</h2> 
    </div> 
    <div id="tab-3" class="tab"> 
     <h2>Here is the third tab</h2> 
    </div> 
</div> 



$(function() 
    { 
    $(".tab").hide(); 
    $(".content").find("div:first").show(); 
    }); 



function ShowHide(e) 
    { 
    $(".tab").hide(); 
    var id =$(e).attr("href"); 
    $(id).show(); 
    }

來源

2012-02-23 13:43:20

dosn't工作！對我來說 – 2013-07-07 06:03:15

這裏是使用導航欄作爲突片的樣本代碼。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script> 
     var prevSelection = "tab1"; 
     $("#navbar ul li").live("click",function(){ 
      var newSelection = $(this).children("a").attr("data-tab-class"); 
      $("."+prevSelection).addClass("ui-screen-hidden"); 
      $("."+newSelection).removeClass("ui-screen-hidden"); 
      prevSelection = newSelection; 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <style> 
     .tab-content{ 
      width:100%; 
      height:250px; 
      background-color:white; 
      border-bottom-left-radius:0.5em; 
      border-bottom-right-radius:0.5em; 
     } 
     .tab-content>div{ 
      padding:5px; 
     }     

    </style> 
    </head> 

    <body> 
     <div data-role="page"> 

     <div data-role="header"> 
     <h1>My Title</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <div data-role="navbar" id="navbar"> 
       <ul> 
        <li><a href="#" class="ui-btn-active" data-tab-class="tab1">Tab1</a></li> 
        <li><a href="#" data-tab-class="tab2">Tab2</a></li> 
        <li><a href="#" data-tab-class="tab3">Tab3</a></li> 
        <li><a href="#" data-tab-class="tab4">Tab4</a></li> 
       </ul> 
      </div> 
      <div class="tab-content"> 
       <div class="tab1"> 
        Tab1 
       </div> 
       <div class="tab2 ui-screen-hidden"> 
        Tab2 
       </div> 
       <div class="tab3 ui-screen-hidden"> 
        Tab3 
       </div> 
       <div class="tab4 ui-screen-hidden"> 
        Tab4 
       </div> 
      </div> 
     </div><!-- /content --> 

     </div><!-- /page --> 
    </body> 
</html>

的演示 - http://jsfiddle.net/m8wQM/

讓我知道，如果它幫助。

來源

2012-02-23 14:46:11 user700284

這是非常好的。但是我們怎樣才能把標籤放在整個頁面上，而不僅僅是在頁面內？你能讓它看起來更合適嗎？ – 2012-02-24 07:11:09

函數.live在jquery 1.9 – risnandar 2013-08-10 11:13:05

如何使用導航欄作爲標籤的jQuery Mobile的

回答

相關問題