javascript - How to rewrite mui.back() to return to the specified ID page?

Question

My homepage has four pages. It is actually one page with four IDs. The nav at the bottom shows which ID corresponds to the page. If I click the return button on the fourth ID page, the .mui-action-back control is executed, but there is no response. What should I do to also click the .mui-action-back control to return to the first ID page from the fourth ID page? Thanks!

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

When I click me to return to the previous page, I hope to return to the page with the id of home.

Answer 1

Hahaha, mui, is better at $ {quoting marks $

There are and only ideas provided:

• For this kind of page switching, assume that each page takes up the full screen:

  • Set a public style: .indexHtml-page

  • Whenever the page jumps, .indexHtml-page -> display: none; At the same time: herfId -> dispaly: block

• Well, usually I will rewrite each page header > a.mui-action-back ; Then each a has a herfID and jumps to where it should go

• Then the question is, if I share a header > a.mui-action-back and want to return to the previous skipped page, what should I do? ?

  • Before the jump:

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

  • The function I currently implement requires data-goback to be used in conjunction with data-href, and is only used in this kind of single-page page jump

  • JS Judgment: If this a[data-href] element has data-goback, record the id of the current page (you can use sessionStroage), wait until a.mui-action-back is clicked, then access sessionStroage first ( Note: sessionStroage should be empty after return))