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））