javascript - mui.back() 怎麼重寫，回到指定的ID頁？

Question

我的首頁有四個頁面，實際上是一個頁面，四個ID，透過底部的nav顯示哪個ID對應的頁面。如果我在第四個ID頁面點擊返回按鈕，執行 .mui-action-back 這個控件，但是沒有反應。我該怎麼做，同樣點選 .mui-action-back 這個控制項由第四個ID頁回到第一個ID頁？謝謝！

<!--bottom nav-->
            <nav class="mui-bar mui-bar-tab anviz-bar-bottom">
                <a class="mui-tab-item mui-active" href="#home">
                    <span class="mui-icon iconfont icon-home"></span>
                    <span class="mui-tab-label">HOME</span>
                </a>
                <a class="mui-tab-item" href="#support">
                    <span class="mui-icon iconfont icon-support"></span>
                    <span class="mui-tab-label">SUPPORT</span>
                </a>
                <a class="mui-tab-item" href="#products">
                    <span class="mui-icon iconfont icon-product"></span>
                    <span class="mui-tab-label">PRODUCTS</span>
                </a>
                <a class="mui-tab-item" href="#me">
                    <span class="mui-icon iconfont icon-profile"></span>
                    <span class="mui-tab-label">ME</span>
                </a>
            </nav>

<!--分别对应不同的ID-->
<p id="contentGroup" class="mui-slider-group roleRight anviz-animation">
    <p id="home" class="mui-slider-item mui-control-content mui-active"></p>
    <p id="support" class="mui-slider-item mui-control-content"></p>                
    <p id="products" class="mui-slider-item mui-control-content"></p>
    <p id="me" class="mui-slider-item mui-control-content"></p>            
</p>

當我點擊me的返回上一頁時，我希望可以回到 id 為 home 的頁面。

Answer 1

哈哈哈， mui， 比較擅長 $ { 打引號 $

有且只提供思路：

• 對於這種page切換， 假設每張page都佔滿全螢幕：

  • 設定一個公有樣式： .indexHtml-page

  • 每當頁面跳轉， .indexHtml-page -> display：none； 同時： herfId -> dispaly : block

• 恩， 一般每個page我都會重寫一個 header > a.mui-action-back ; 然後每一個a都有一個herfID 跳到他應該去的地方

• 那麼問題來了， 如果我是共用一個 header > a.mui-action-back 要返回上一個跳過來的page， 麼搞啊？ ？

  • 跳轉前：

    <a class="mui-tab-item" data-goback="true" data-href="#support">
        <span class="mui-icon iconfont icon-support"></span>
        <span class="mui-tab-label">SUPPORT</span>
    </a>
    添加 data-goback 与 data-href； 

  • 我目前實作的函數是要求 data-goback 與 data-href 配對使用的， 而且只使用在這種單頁page跳轉中

  • JS 判斷： 如果此a[data-href] 元素擁有data-goback， 則記錄下目前所在page的id（ 可以用sessionStroage ）， 等點擊a.mui-action-back ， 則先訪問sessionStroage（注意： 回傳後應該空sessionStroage））