Question

我从我的某个项目中选择一个标签栏并将其放在jsfiddle上，但是有太多的CSS无法理解，所以我从CSS中获取了有用的代码并制作了自己的{{3}但它与例子100％相似。但我需要在我的jQuery移动示例中制作相同的标签栏。

我使用了data-role ="navbar"

这是我的最终演示，其中我需要添加此上部标签栏而不是按钮

<div data-role="navbar">
  <ul>
    <li><a href="#" class="tabBtn" data-tabid="0">One</a></li>
    <li><a href="#" class="tabBtn" data-tabid="1">Two</a></li>
    <li><a href="#" class="tabBtn" data-tabid="2">Three</a></li>
  </ul>
</div>

如何使标签栏与上面的小提琴相同？

fiddle here

Answer 1

只需添加此css

即可

.ui-btn-active{
 border-bottom: 3px solid #c30 !important;
}

http://jsfiddle.net/o9foej5L/3/

您需要获得JavaScript的帮助

   $(".tabBtn").on("click", function(){
         $(".tabBtn").removeClass("activeWI");
        $(this).addClass("activeWI");
    });

对HTML的更改

<header>
    <div class="topbarWI">
        <div class="midbox">
            <div class="main-menu">
                <a runat="server" href="#" id="logoutRg" class="tabBtn fl activeWI">Tab1</a>
                <a runat="server" href="#" id="faqbtnRg" class="tabBtn fright">Tab3</a>
                <a runat="server" href="#" id="newregistrationRg" class="tabBtn mid-link">Tab2</a>
            </div>
        </div>
    </div>
</header>

JS Fildle：http://jsfiddle.net/h7Lasuoh/1/

Answer 2

先演示，然后解释：

更新了 FIDDLE

我在导航栏中添加了一个类：

<div data-role="navbar" class="myNavBar">

然后下面的CSS可以解决问题：

.myNavBar  {
    border-bottom: 1px solid #fb7923;
}
.myNavBar a {
    border-width: 0px !important;  
}
.myNavBar a.ui-btn-active {
    background-color: rgb(246, 246, 246) !important;   
    border-color: rgb(221, 221, 221) !important;
    border-bottom: 3px solid #fb7923 !important;
    color: #fb7923 !important;
    padding-bottom: 6.75px;
    text-shadow: none !important;
    box-shadow: none  !important;
}
.myNavBar a:hover {
    border-color: rgb(221, 221, 221) !important;
    border-bottom: 3px solid #fb7923 !important;
    padding-bottom: 6.75px;
}

第一个将整个导航栏的下边框设置为橙色。第二个删除所有按钮边框。 ui-btn-active覆盖将文本设置为橙色，创建较厚的底部边框并调整填充以使按钮与其他按钮保持相同的高度。我还调整了悬停状态。

您应该调整这些设置以获得您想要的效果。

如何在jQuery mobile中制作标签栏？

2 个答案: