- Framework7 教程
- Framework7 - 首頁
- Framework7 - 概述
- Framework7 - 環境配置
- Framework7 元件
- Framework7 - 佈局
- Framework7 - 導航欄
- Framework7 - 工具欄
- Framework7 - 搜尋欄
- Framework7 - 狀態列
- Framework7 - 側邊欄
- Framework7 - 內容塊
- Framework7 - 網格佈局
- Framework7 - 覆蓋層
- Framework7 - 預載入器
- Framework7 - 進度條
- Framework7 - 列表檢視
- Framework7 - 手風琴
- Framework7 - 卡片
- Framework7 - 晶片
- Framework7 - 按鈕
- Framework7 - 操作按鈕
- Framework7 - 表單
- Framework7 - 標籤頁
- Framework7 - Swiper 滑塊
- Framework7 - 圖片瀏覽器
- Framework7 - 自動完成
- Framework7 - 選擇器
- Framework7 - 日曆
- Framework7 - 重新整理
- Framework7 - 無限滾動
- Framework7 - 訊息
- Framework7 - 訊息欄
- Framework7 - 通知
- Framework7 - 懶載入
- Framework7 樣式
- Framework7 - 顏色主題
- Framework7 - 分隔線
- Framework7 模板
- Framework7 - 模板概述
- Framework7 - 自動編譯
- Framework7 - Template7 頁面
- Framework7 快速點選
- Framework7 - 活動狀態
- Framework7 - 長按事件
- Framework7 - 點選水波紋
- Framework7 有用資源
- Framework7 - 快速指南
- Framework7 - 有用資源
- Framework7 - 討論
Framework7 - 多個連結
描述
要使用多個連結，只需新增幾個額外的 <a class = "link"> 到你選擇的任何部分。
示例
以下示例演示了在 Framework7 中使用帶有多個連結的導航欄：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Navbar With Multiple Links</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left">
<a href = "#" class = "link">Left 1</a>
</div>
<div class = "center">Center</div>
<div class = "right">
<a href = "#" class = "link">Right 1</a>
<a href = "#" class = "link">Right 2</a>
</div>
</div>
</div>
<div class = "pages navbar-through ">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
</body>
</html>
輸出
讓我們執行以下步驟來檢視上面給出的程式碼是如何工作的：
將上面給出的 html 程式碼儲存為 **navbar_multi_links.html** 檔案到你的伺服器根目錄。
開啟此 HTML 檔案，地址為 https:///navbar_multi_links.html，輸出將如下所示。
導航欄在頁面的左側或右側提供多個連結。
framework7_navbars.htm
廣告