javascript - mui.back() 怎麼重寫,回到指定的ID頁?
怪我咯
怪我咯 2017-06-26 10:52:39
0
1
1169

我的首頁有四個頁面,實際上是一個頁面,四個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 的頁面。

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回覆(1)
学习ing

哈哈哈, 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-gobackdata-href 配對使用的, 而且只使用在這種單頁page跳轉中

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板