Question

这是我在小提琴上试过的以下代码 Jsfiddle code

<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>

我需要显示第一个标签＆amp;默认情况下的内容
我需要在显示一个特定标签时隐藏其他标签的内容

怎么做？

Answer 1

以下是使用navbars作为标签的示例代码。

<!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/

如果有帮助，请告诉我。

Answer 2

试试这个，

<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();
  }

Answer 3

这不是我的代码，但如果您导航到第1页，则页脚导航栏会显示标签：

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

如何在jquery mobile中使用navbars作为选项卡

4 个答案: