标题中的 Jquery 移动导航栏样式无法正常工作

Question

我正在使用 Cordova/PhoneGap 开发一个 Jquery 移动应用程序，我希望在我的标题下直接有一个导航栏，位置固定，因此导航栏不会随内容滚动。如果我将导航栏放在标题中，它会继承标题的样式，并且导航栏的 css 不会像它应该的那样表现。例如。当我单击导航栏中的某个项目时没有突出显示，它只是保持与标题本身相同的颜色（在我的情况下为黑色），并且也没有更多可见的边框。只有项目内的文本会响应单击。我查了几个例子，但似乎都不适合我：
Example one
Example two

这是我的页面代码：

<div data-role="page" id="page_tasks">
    <div data-role="header" data-id="header" data-theme="b" data-position="fixed">
        <h1>Tasks</h1>
        <a href="#leftmenu" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars"></a>
        <div data-role="navbar">
        <ul>
            <li class="iconnavbar"><a href="#" data-href="overdue">1</a></li>
            <li class="iconnavbar"><a href="#" data-href="today">2</a></li>
            <li class="iconnavbar"><a href="#" data-href="thisweek">3</a></li>
            <li class="iconnavbar"><a href="#" data-href="nextweek">4</a></li>
            <li class="iconnavbar"><a href="#" data-href="later">5</a></li>
            <li class="iconnavbar"><a href="#" data-href="finished">6</a></li>
        </ul>
    </div>
    </div>

    <div data-role="main" class="ui-content">
        <!-- page content, unrelated -->
    </div>
</div>

iconnavbar 类的 CSS 如下：

.iconnavbar {
 width: 16.66% !important;
 clear: none !important;
}

但这不应该对我的问题有任何影响。事实上，我还尝试删除所有内容，使其看起来与其中一个示例完全相同，但我仍然得到了同样糟糕的结果。

那么我该如何解决这个问题呢？或者有没有更好/替代的方法来将导航栏添加到我的页面顶部，并像示例中那样具有固定位置？

以下是 iPhone 上菜单的屏幕截图，并按下了第 3 项。

Answer 1

因为我使用样式来消除标题中图标后面的正方形，如下所示：

.ui-header a {
  background: none !important;
  border: 0px;
}

它也影响了我试图添加的导航栏。只需将 css 更改为：

.ui-header > a {
  background: none !important;
  border: 0px;
}

我只实现了元素类型“a”的标题的直接子元素的样式。我还更喜欢导航栏是数据主题 a，而标题本身是数据主题 b。为此，我创建了一个带有 headerwrapper 类的固定标头。这将我的标题的两个不同部分包装在一起。我将这两个不同的部分保存在不同的 div 中，因此我可以使用与导航栏不同的主题来设置标题顶部的样式。最终代码如下：

<div data-role="page" id="page_tasks">
    <div data-role="header" class="headerwrapper" data-position="fixed">
        <div data-role="header" data-theme="b">
            <h1>Tasks</h1>
            <a href="#leftmenu" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars"></a>
        </div>
        <div data-role="navbar" id="tasksnavbar">
            <ul>
                <li class="iconnavbar"><a href="#" data-href="overdue">1</a></li>
                <li class="iconnavbar"><a href="#" data-href="today">2</a></li>
                <li class="iconnavbar"><a href="#" data-href="thisweek">3</a></li>
                <li class="iconnavbar"><a href="#" data-href="nextweek">4</a></li>
                <li class="iconnavbar"><a href="#" data-href="later">5</a></li>
                <li class="iconnavbar"><a href="#" data-href="finished">6</a></li>
            </ul>
        </div>
    </div>
    <div>
        <!-- here goes the content -->
    </div>
</div>

最后是通过屏幕顶部的 headerwrapper 消除一些间距：

.headerwrapper {
  border-top: 0px !important;
  padding-top: 0px !important;
}

对于使用此功能的任何人：我在导航栏的 ul 中使用的类/属性完全不相关，您可以将它们替换为您想要的任何内容。 最终结果：