在Axure中，你可以通過以下步驟實現主頁面中的內聯框架在點擊按鈕時切換頁面內容，從A頁面切換到B頁面。（誤區：子頁面之間切換不要設置“框架中打開鏈接”然后選“父級框架”這個交互）

主框架頁面（左側導航展示所有頁面菜單）：

子頁面切換主框架內聯框架頁面鏈接：

?實現跳轉效果：

其實，子頁面要控制主框架切換菜單（也就是切換內聯框架的鏈接）只需在子頁面交互中設置打開鏈接，然后選擇頁面。

一起來看下案例的詳細介紹吧！

步驟概述

1. 設置內聯框架：在主頁面的內聯框架中加載A頁面。
2. 創建按鈕交互：在A頁面中創建一個按鈕，并設置其點擊事件來改變內聯框架的頁面內容。

詳細步驟

1. 設置主頁面和內聯框架

• 創建主頁面：
  • 打開Axure，創建一個新的頁面作為主頁面。
• 添加內聯框架：
  • 從元件庫中拖動一個內聯框架（Inline Frame）到主頁面的畫布上。
  • 調整內聯框架的大小和位置。
• 設置內聯框架的初始頁面：
  • 右鍵點擊內聯框架，選擇“鏈接到URL或文件”。
  • 在彈出的對話框中，選擇“鏈接到Axure頁面”，然后選擇A頁面。

2. 在A頁面中創建按鈕并設置交互

• 創建A頁面：
  • 創建一個新的頁面作為A頁面。
• 在A頁面中添加按鈕：
  • 從元件庫中拖動一個按鈕到A頁面的畫布上。
  • 設置按鈕的文本和樣式，例如“切換到B頁面”。
• 設置按鈕的點擊交互：
  • 右鍵點擊按鈕，選擇“交互”選項卡。
  • 點擊“新建交互”，選擇“單擊時”（OnClick）。
  • 在動作中選擇“鏈接到URL或文件”。
  • 在彈出的對話框中，選擇“鏈接到Axure頁面”，然后選擇B頁面。

3. 創建B頁面

• 創建B頁面：
  • 創建一個新的頁面作為B頁面。
  • 在B頁面中設計你需要的內容。

4. 測試交互效果

• 預覽主頁面：
  • 點擊Axure的預覽按鈕，查看主頁面的效果。
  • 點擊內聯框架中的按鈕，確認內聯框架的內容是否切換為B頁面。

注意事項

• 頁面鏈接：確保在設置內聯框架和按鈕的鏈接時，選擇了正確的Axure頁面。
• 命名規范：為頁面和按鈕設置清晰的命名，以便于管理和調試。
• 交互邏輯：如果交互邏輯復雜，可以使用Axure的注釋功能，幫助理解交互流程。

通過以上步驟，你可以在Axure中實現主頁面內聯框架在點擊按鈕時切換頁面內容的功能。

?

????— — 往期推薦 — —

EQL UI元件庫：Axure設計師的高效利器-CSDN博客?

Axure大屏可視化模板：賦能多領域，開啟數據展示新篇章_axre-CSDN博客

2小時完成1天工作量？有了這款Axure移動端元件庫，設計如此簡單-CSDN博客

CRM企業客戶關系管理系統產品原型方案-CSDN博客

Axhub Charts：Axure原型設計的動態數據可視化元件庫-CSDN博客