4

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

<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>
  1. 我需要默认显示第一个选项卡及其内容
  2. 当显示一个特定选项卡时，我需要隐藏其他选项卡的内容

怎么做？

​</p>

4

4 回答 4

6

这是一个使用导航栏作为选项卡的示例代码。

<!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-23T14:46:11.810 回答
3

试试这个，

<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-23T13:43:20.160 回答
1

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

相关问题：

于 2012-02-24T01:03:32.790 回答
0

在标题中包含导航栏。就像是

 <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-23T13:42:35.190 回答