Javascript 如何在jQuery mobile中创建选项卡栏？

我从我的一个项目中取了一个标签栏，并把它放在上面，但是有太多的CSS，这是不可能理解的，所以我从CSS中提取了有用的代码并制作了自己的，但它与示例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> 

如何使选项卡栏与上述小提琴中的选项卡栏相同

只需添加此css即可

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

您需要借助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:

先演示，然后解释：

更新

我向导航栏添加了一个类：

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

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

---

您应该调整这些设置以获得所需的设置。

否，但选项卡栏与上面的小提琴不同。

（你在标签下划线，但不是按钮。）请检查前两个提琴请删除你的答案我想你没有理解请检查这个提琴条不是按钮它们是标签，背景颜色是different@user2535959检查我的更新答案。删除不需要的CSS。你必须找到每一组CSS属性并在您的方便。谢谢您的回答。。但是我们可以在我的主要示例中使用该选项卡栏吗？在这个。关于button或ul li如果您想添加行底部，它就在

边框底部：

关于

li

但是我的li在小提琴中看起来不一样。它们看起来像按钮。我想您没有看到它。请检查这个小提琴栏，而不是按钮它们是标签和背景颜色不同

.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;
}