javascript - 如何在 jQuery Mobile 中制作标签栏？

Question

我从我的一个元素中取出一个标签栏并将其放在 jsfiddle 上，但是有太多的 CSS 无法理解所以我从 CSS 中提取了有用的代码并制作了我自己的 fiddle here但它与示例 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 相同？

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

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 文件:http://jsfiddle.net/h7Lasuoh/1/