如何使用导航栏作为标签的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的

回答

相关问题