Tombol kembali / berikutnya browser untuk menavigasi antar tab

Saya mendapat banyak keluhan dari pengguna bahwa ketika mereka menggunakan tab berbasis jQuery saya, mereka merasa menjengkelkan bahwa ketika mereka menekan balik pada browser mereka, mereka tidak pergi ke tab sebelumnya tetapi ke halaman sebelumnya . Saya menambahkan tombol sebelumnya / berikutnya tetapi tidak cukup. Bagaimana cara mengkonfigurasi ulang tombol saya sehingga pengguna akan pergi ke tab sebelumnya daripada halaman sebelumnya ketika mereka mengklik panah kembali browser. Anda bisa mengujinya di sini .

$('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>');
$('.tablink-prev').click(function () {
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    if (index == 0) {
        index = 1;
    }
    $('.quicktabs-tabs li').eq(index - 1).addClass('active');
    $('.quicktabs-tabs li').eq(index - 1).find('a').click();
    return false;
});
$('.tablink-next').click(function () {
    var length = $('.quicktabs-tabs').first().children().size();;
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    //                if (parseInt(index) == parseInt(length) - 1 ) {
    //                    index = index - 1;
    //                }
    if (parseInt(index) == parseInt(length) - 1) {
        window.location.href = '/home'; //redirect to home
        //index = index - 1;
    }
    $('.quicktabs-tabs li').eq(index + 1).addClass('active');
    $('.quicktabs-tabs li').eq(index + 1).find('a').click();
    return false;
});

Anda dapat menggunakan Riwayat.

Dorong status riwayat saat tab baru dibuka

history.pushState({page: 1}, "title 1", "?page=1")

Referensi: https://developer.mozilla.org/en-US/docs/Web/API/History_API

Tanpa kode lengkap Anda, saya tidak bisa memberi Anda contoh yang dipesan lebih dahulu, tetapi Anda dapat menambahkan tag anchor ke setiap tab yang berisi div.

Ini akan memperbarui URL setiap kali pengguna mengklik tautan tab. Perubahan URL ini akan disimpan dalam riwayat browser dan akan dipanggil kembali ketika menavigasi mundur.

<div id="Tab1">
  <h2><a href="#Tab1">Tab 1</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab2">
  <h2><a href="#Tab2">Tab 2</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab3">
  <h2><a href="#Tab3">Tab 3</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab4">
  <h2><a href="#Tab4">Tab 4</a></h2>
  <p>This tab content</p>
</div>

URL yang diperbarui akan terlihat seperti ini setiap kali Anda mengklik tab:

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4

di satu sisi, fungsi tab Anda berikutnya ditulis dalam javascript, dan di sisi lain, tombol kembali di browser menggunakan riwayat browser sehingga ini tidak relevan dengan fungsi Anda dan sama sekali tidak bisa membawa Anda ke tab sebelumnya.

Jadi, Anda memiliki dua cara untuk mewujudkannya:

1: cobalah memuat setiap langkah di halaman yang berbeda dengan menyegarkan browser, sehingga halaman disimpan dalam riwayat browser dan dengan menekan tombol kembali Anda dapat melihat langkah sebelumnya

Kedua: Anda harus memiliki tombol "sebelumnya" untuk melihat langkah sebelumnya seperti halnya tombol langkah berikutnya

Saya telah menggunakan tab bootsrap dengan navigasi tab browser di bawah ini adalah contoh lengkapnya

<div class="tabs-Nav border-top-0">
    <ul class="nav" role="tablist">
        <li>
            <a
            id="friends"
            data-pagination-id="friends"
            class="active"
            data-toggle="tab"
            href="#friendsTab"
            role="tab"
            aria-controls="friends"
            aria-selected="true">
                Friends
            </a>
        </li>
        <li>
            <a id="followers" data-pagination-id="followers" class="" data-toggle="tab" href="#followersTab" role="tab" aria-controls="followers" aria-selected="false">
                Followers
            </a>
        </li>
        <li>
            <a id="followings" data-pagination-id="followings" class="" data-toggle="tab" href="#followingTab" role="tab" aria-controls="followings" aria-selected="false">
                Following
            </a>
        </li>
        <li>
            <a id="invites" data-pagination-id="invites" class="" data-toggle="tab" href="#invitesTab" role="tab" aria-controls="invites" aria-selected="false">
                Invites
            </a>
        </li>
    </ul>
</div>


/**
* add // id="friends" data-pagination-id="friends"
* in your html tabs the demo html is also added.
**/
$(document).ready(function () {
    const param = 'tabID';
    $("[data-pagination-id]").click(function () {

        const pageParam = $(this).attr('data-pagination-param') || param;

        //add tabId to the params
        addParam(pageParam, $(this).attr('data-pagination-id'), true);
    });

    const preTab = getParamVal(param);

    if (param) {
        $('[data-pagination-id="'+ preTab +'"]').click();
    }
});


 /**
 * add params to the url if preParams is false then all previous
 * params will be removed.
 **/
addParam = (pageParam, paramValue, preParams) => {
    //get current url without params
    var mainUrl = window.location.href.split('?')[0];

    //get params without url
    var paramString = location.search.substring(1);

    if (preParams && paramString) { //when params found

        //change param string to json object
        var paramsObj = JSON.parse('{"' + decodeURI(paramString).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
    } else {
        //when current params are empty then create an empty object.
        var paramsObj = {};
    }

    //only for ads tabs
    if (pageParam) {
        //add tabId to the params
        paramsObj[pageParam] = paramValue;

        //push params without refreshing the page.
        history.pushState(false, false, mainUrl + '?' + $.param(paramsObj).replace(new RegExp('%2B', 'gi'), '+'));
    }
};

 /**
 * Get value of a params from url if not exists then return null
 **/
getParamVal = (pageParam) => {
    const mainUrl = window.location.href.split('?')[0];
    const paramString = location.search.substring(1);
    const paramsObj = JSON.parse('{"' + decodeURI(paramString).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');

    return paramsObj[pageParam];
};

Anda dapat memeriksa contoh kode saya yang langsung berfungsi

1> PERGI KE https://www.notesgen.com (gunakan desktop)

2> Buat akun Anda sebagai siswa

3> PERGI KE Akun Saya / Unduhan Saya

4> Klik Koneksi Saya

Mengubah hash mirip dengan mendorong negara history.pushStateyang memicu popstateperistiwa. Menekan maju dan mundur di peramban akan muncul dan mendorong status ini sehingga Anda tidak memerlukan penangan khusus lainnya.

PS: Anda dapat menambahkan gaya css :targetdari activekelas Anda . window.addEventListener('popstate'Log di sini hanya menunjukkan kepada Anda acara tetapi event.stateakan selalu nol dalam kasus ini.

Jalankan cuplikan kode, coba navigasikan tab lalu gunakan tombol kembali dan maju browser.

<style type="text/css">
    div { display: none }
   :target { display: block }
</style>


  <h2><a href="#Tab1">Tab 1</a> | <a href="#Tab2">Tab 2</a> | <a href="#Tab3">Tab 3</a> | <a href="#Tab4">Tab 4</a></h2>


<div id="Tab1">
  <p>This tab 1 content</p>
</div>

<div id="Tab2">
  <p>This tab 2 content</p>
</div>

<div id="Tab3">
  <p>This tab 3 content</p>
</div>

<div id="Tab4">
  <p>This tab 4 content</p>
</div>

<script>
  (() => {
history.pushState(null, '', '#Tab1');
window.addEventListener('popstate', event => {
 console.log(window.location.hash);
});
})()
</script>

Hal pertama yang Anda butuhkan, cegah tautan untuk mengirimkan url dalam histori dengan $ event.preventDefualt () di event klik dan sesuaikan histori dengan history.pushState (data, judul, url) .

Di js kami memiliki acara yang membantu kami untuk mengontrol kembali dan meneruskan acara oleh pengguna. Nama acara ini adalah "popstate". Anda dapat menggunakannya dengan window.addEventListener ('popstate', callback) . dalam fungsi panggilan balik Anda dapat mengaktifkan dan menonaktifkan tab (menambah dan menghapus kelas) dan mengekstrak url.

Saya menunjukkan ini dengan kode sampel. untuk melakukan dan memahami lebih baik, cobalah di server atau server lokal karena di sana mengubah url di sini terbatas:

$('nav ul a').on('click', function($e) {
        function appendContent(hash) {
            $('#content').text(`Content of  item ${hash} `);
        }
        $e.preventDefault(); // when click the link stay in page
        let _this = this; // get the link tag
        let hash = _this.hash.replace(/\#/, '');
        
        appendContent(hash);
        $('li').removeAttr('class');
        $('a').removeAttr('class');
        $(`a[href*=${hash}]`).addClass('text-white').addClass('border-0').parent().addClass('bg-primary').addClass('last-style');
     
           history.pushState('', _this.text, hash); // add the link in history
  
        window.addEventListener('popstate', function ($e) {
             let hashAgain = location.hash.replace(/\#/, ''); // you extract the hash
            appendContent(hashAgain); // set the content of the back or forward link
          $('li').removeAttr('class');
        $('a').removeAttr('class');
        $(`a[href*=${hash}]`).addClass('text-white').addClass('border-0').parent().addClass('bg-primary').addClass('last-style'); // update the status of tab 
          
            
        });
    });

ul li {
  display: inline-block;
  margin: 1em; 
}

li a,
.last-style {
  border: 1px solid;
  padding: 0.5em 1em;
}

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" >
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Learning Java Script In Deep</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
		<script type="text/javascript" src="js/angular/angular.min.js"></script>
	</head>
	<body>
	
		<header class="text-center text-black-50">
			<h1>Learning JS in Deep</h1>
			<nav id="">
				<ul id="">
					<li><a href="#home" class="home">Home</a></li>
					<li><a href="#item1">Item 1</a></li>
					<li><a href="#item2">Item 2</a></li>
					<li><a href="#item3">Item 3</a></li>
					<li><a href="#item4">Item 4</a></li>
				</ul>
			</nav>
		</header>

        <div class="container m-auto text-center" id="content">
            <p>Load <em class="text-danger">Content</em> in Here</p>
        </div>

        <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        
		
	</body>	
</html>