javascript - Bagaimana untuk menulis semula mui.back() untuk kembali ke halaman ID yang ditentukan?

Question

Halaman utama saya mempunyai empat halaman Ia sebenarnya satu halaman dengan empat ID Nav di bahagian bawah menunjukkan ID yang sepadan dengan halaman. Jika saya mengklik butang kembali pada halaman ID keempat, kawalan .mui-action-back dilaksanakan, tetapi tiada respons. Apakah yang perlu saya lakukan untuk turut mengklik kawalan .mui-action-back untuk kembali ke halaman ID pertama daripada halaman ID keempat? Terima kasih!

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

Apabila saya mengklik saya untuk kembali ke halaman sebelumnya, saya berharap untuk kembali ke halaman dengan id rumah.

Answer 1

Hahaha, mui, lebih pandai $ {petik markah $

Ada dan hanya idea yang disediakan:

• Untuk penukaran halaman jenis ini, anggap setiap halaman menggunakan skrin penuh:

  • Tetapkan gaya awam: .indexHtml-page

  • Setiap kali halaman melompat, .indexHtml-page -> display：none； 同时： herfId -> dispaly : block

• Nah, biasanya saya akan menulis semula setiap halaman header > a.mui-action-back; dan kemudian setiap a akan mempunyai herfID untuk melompat ke tempat yang sepatutnya

• Maka persoalannya, jika saya berkongsi header > a.mui-action-back dan ingin kembali ke halaman yang dilangkau sebelumnya, apakah yang perlu saya lakukan? ?

  • Sebelum lompat:

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

  • Fungsi yang saya laksanakan pada masa ini diperlukan untuk digunakan bersama dengan data-goback 与 data-href, dan hanya digunakan dalam lompat halaman satu halaman seperti ini

  • Penghakiman JS: Jika elemen a[data-href] ini mempunyai data-goback, rekod id halaman semasa (anda boleh menggunakan sessionStroage), tunggu sehingga a.mui-action-back diklik, kemudian lawati sessionStroage dahulu (nota: sessionStroage sepatutnya kosong lepas balik) ))