javascript - Wie schreibe ich mui.back() um, um zur angegebenen ID-Seite zurückzukehren?

Question

Meine Homepage hat vier Seiten. Es handelt sich tatsächlich um eine Seite mit vier IDs. Die Navigation unten zeigt, welche ID der Seite entspricht. Wenn ich auf der vierten ID-Seite auf die Schaltfläche „Zurück“ klicke, wird das .mui-action-back-Steuerelement ausgeführt, es erfolgt jedoch keine Antwort. Was muss ich tun, um auch auf das Steuerelement „.mui-action-back“ zu klicken, um von der vierten ID-Seite zur ersten ID-Seite zurückzukehren? Danke!

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

Wenn ich auf mich klicke, um zur vorherigen Seite zurückzukehren, hoffe ich, zur Seite mit der ID „Zuhause“ zurückzukehren.

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