如何在jQuery移动中制作标签栏？

我从我的项目中选择了一个标签栏，并将它放在jsfiddle上，但是CSS太多了，无法理解，所以我从CSS中获取有用的代码并制作了自己的fiddle here，但它与示例100％相似。但我需要在我的jQuery手机示例中制作相同的标签栏。如何在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>

如何使标签栏相同以上小提琴？

http://jsfiddle.net/ezanker/o9foej5L/1/

来源

2014-08-29 Shruti

如果你想添加线条底部，它只是在''边框底部：''li' – fsi 2014-08-29 18:51:40

，但我的小提琴看起来不一样。他们看起来像按钮 – Shruti 2014-08-29 18:53:50

我认为你没有得到它请检查这个小提琴http://jsfiddle.net/4tazs4vx/..tab栏不按钮他们是标签和背景颜色是不同的 – Shruti 2014-08-29 19:12:11

演示第一，然后解释：

更新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覆盖设置文本橙色，创建较厚的底部边框并调整填充以使按钮保持与其他高度相同的高度。我也调整了悬停状态。

你应该调整这些设置以得到你想要的。

来源

2014-08-29 21:11:09 ezanker

只需添加这个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/

来源

2014-08-29 18:43:47 HaBo

不，但标签栏看起来不像上面的小提琴相同.. :(你强调标签但是不是按钮..请检查前两个小提琴 – Shruti 2014-08-29 18:46:13

请删除您的答案 – Shruti 2014-08-29 18:54:17

我想你没有得到它，请检查这个小提琴http://jsfiddle.net/4tazs4vx/..tab栏不按钮他们是标签和背景颜色是不同的 – Shruti 2014-08-29 19:13:33

如何在jQuery移动中制作标签栏？

回答

相关问题