菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery Mobile 教程

jQuery Mobile 导航栏

likuolei

jQuery Mobile 导航栏（Navbar）详解

导航栏（Navbar） 是 jQuery Mobile 中用于 底部 Tab 切换、多按钮导航 的核心组件，完美结合 图标 + 文字 + 激活状态，像原生 App 一样丝滑。

常用于 底部固定工具栏，最多推荐 5 个 Tab。

1. 基本结构

<div data-role="footer" data-position="fixed">
  <div data-role="navbar">
    <ul>
      <li><a href="#home" class="ui-btn-active">首页</a></li>
      <li><a href="#news">消息</a></li>
      <li><a href="#cart">购物车</a></li>
      <li><a href="#user">我的</a></li>
    </ul>
  </div>
</div>

关键点：

  • data-role="navbar"
  • <ul><li> 结构
  • class="ui-btn-active" → 当前高亮

2. 推荐样式：图标在上，文字在下

<div data-role="navbar">
  <ul>
    <li>
      <a href="#home" class="ui-btn-active ui-btn ui-icon-home ui-btn-icon-top">
        首页
      </a>
    </li>
    <li>
      <a href="#news" class="ui-btn ui-icon-comment ui-btn-icon-top">
        消息
      </a>
    </li>
    <li>
      <a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-top">
        购物车
      </a>
    </li>
    <li>
      <a href="#user" class="ui-btn ui-icon-user ui-btn-icon-top">
        我的
      </a>
    </li>
  </ul>
</div>

ui-btn-icon-top：图标在上，文字在下（推荐移动端）

3. 完整多页导航示例（可直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQM 导航栏示例</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- ========== 页面：首页 ========== -->
<div data-role="page" id="home">
  <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <h1>首页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <h2>欢迎来到首页</h2>
    <p>当前时间：2025年11月17日 02:59（CET）</p>
    <p>国家：比利时 (BE)</p>
    <div style="height:600px;"></div> <!-- 模拟长内容 -->
  </div>

  <!-- 底部导航栏 -->
  <div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
      <ul>
        <li><a href="#home" class="ui-btn-active ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
        <li><a href="#news" class="ui-btn ui-icon-comment ui-btn-icon-top">消息</a></li>
        <li><a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
        <li><a href="#user" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
      </ul>
    </div>
  </div>
</div>

<!-- ========== 页面：消息 ========== -->
<div data-role="page" id="news">
  <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <h1>消息中心</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>暂无新消息</p>
  </div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
      <ul>
        <li><a href="#home" class="ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
        <li><a href="#news" class="ui-btn-active ui-btn ui-icon-comment ui-btn-icon-top">消息</a></li>
        <li><a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
        <li><a href="#user" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
      </ul>
    </div>
  </div>
</div>

<!-- ========== 其他页面类似 ========== -->
<div data-role="page" id="cart">
  <div data-role="header" data-position="fixed"><h1>购物车</h1></div>
  <div data-role="main" class="ui-content"><p>空空如也~</p></div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
      <ul>
        <li><a href="#home" class="ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
        <li><a href="#news" class="ui-btn ui-icon-comment ui-btn-icon-top">消息</a></li>
        <li><a href="#cart" class="ui-btn-active ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
        <li><a href="#user" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
      </ul>
    </div>
  </div>
</div>

<div data-role="page" id="user">
  <div data-role="header" data-position="fixed"><h1>个人中心</h1></div>
  <div data-role="main" class="ui-content"><p>你好，比利时用户！</p></div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
      <ul>
        <li><a href="#home" class="ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
        <li><a href="#news" class="ui-btn ui-icon-comment ui-btn-icon-top">消息</a></li>
        <li><a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
        <li><a href="#user" class="ui-btn-active ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

4. 导航栏属性汇总

属性值说明
data-role="navbar"—必须
class="ui-navbar"自动添加无需手动写
ui-btn-active—当前页高亮
ui-btn-icon-top—图标在上
data-icon="home"旧写法不推荐，用 ui-icon-home

5. 动态激活（JavaScript）

<script>
$(document).on("pagecontainershow", function() {
  var current = $.mobile.activePage.attr("id"); // 获取当前页面 ID
  $(".ui-btn-active").removeClass("ui-btn-active"); // 清除所有
  $("a[href='#" + current + "']").addClass("ui-btn-active"); // 高亮当前
});
</script>

自动根据页面 ID 高亮对应 Tab

6. 进阶：带未读角标（Badge）

<li>
  <a href="#news" class="ui-btn ui-icon-comment ui-btn-icon-top">
    消息
    <span class="ui-li-count" style="background:#f33; color:white;">3</span>
  </a>
</li>

ui-li-count：jQM 内置角标样式

7. 最佳实践

建议说明
最多 5 个 Tab超过 5 个会换行
图标 + 文字用 ui-btn-icon-top
固定底部data-position="fixed"
防止隐藏data-tap-toggle="false"
内容加底部 padding避免被导航栏遮挡
<div data-role="main" class="ui-content" style="padding-bottom:60px;">

8. 常见问题

问题解决方案
Tab 换行减少数量，或用 CSS white-space:nowrap
高亮不切换用 JS 动态添加 ui-btn-active
图标不显示确保 CDN 加载 images/
点击无反应检查 href="#正确ID"

9. 推荐图标组合（底部导航）

Tab图标类名文字
首页ui-icon-home首页
分类ui-icon-grid分类
消息ui-icon-comment消息
购物车ui-icon-shop购物车
我的ui-icon-user我的

总结：标准导航栏模板

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
  <div data-role="navbar">
    <ul>
      <li><a href="#home" class="ui-btn-active ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
      <li><a href="#news" class="ui-btn ui-icon-comment ui-btn-icon-top">消息</a></li>
      <li><a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
      <li><a href="#user" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
    </ul>
  </div>
</div>

需要我为你生成：

  • 带未读红点 + 自动高亮 JS 完整项目？
  • 5个以上 Tab 的水平滚动导航？
  • 顶部导航栏（Header Navbar）？

随时告诉我！

网站 http://yingjuxia.com
文章已创建 2588

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部