Bouton Précédent / Suivant du navigateur pour naviguer entre les onglets

Je reçois beaucoup de plaintes des utilisateurs que lorsqu'ils utilisent mes onglets basés sur jQuery, ils trouvent ennuyeux que lorsqu'ils reviennent sur leur navigateur, ils ne reviennent pas à l'onglet précédent mais à la page précédente . J'ai ajouté les boutons précédent / suivant suivants mais pas assez. Comment puis-je reconfigurer mes boutons pour que les utilisateurs accèdent à l'onglet précédent plutôt qu'à la page précédente lorsqu'ils cliquent sur la flèche de retour du navigateur. Vous pouvez le tester ici .

$('#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;
});

Vous pouvez utiliser l'historique.

Poussez un état d'historique lorsqu'un nouvel onglet est ouvert

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

Référence: https://developer.mozilla.org/en-US/docs/Web/API/History_API

Sans votre code complet, je ne peux pas vous donner d'exemple sur mesure, mais vous pouvez simplement ajouter des balises d'ancrage à chaque onglet contenant div.

Cela mettra à jour l'URL chaque fois qu'un utilisateur clique sur un lien d'onglet. Ces modifications d'URL seront stockées dans l'historique du navigateur et seront rappelées lors de la navigation vers l'arrière.

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

L'URL mise à jour ressemblera à ceci chaque fois que vous cliquez sur un onglet:

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4

d'un côté, votre fonction d'onglet suivante est écrite en javascript, et de l'autre côté, le bouton de retour dans le navigateur utilise l'historique du navigateur, donc cela n'a aucun rapport avec vos fonctions et ne peut pas vous amener du tout à l'onglet précédent.

Vous avez donc deux façons d'y arriver:

1er: essayez de charger chaque étape dans une page différente en actualisant le navigateur, de sorte que la page enregistre dans l'historique du navigateur et en appuyant sur le bouton de retour, vous pouvez voir l'étape précédente

2ème: vous devriez avoir un bouton "précédent" pour voir l'étape précédente tout comme votre bouton d'étape suivante

J'ai utilisé des onglets bootsrap avec la navigation des onglets du navigateur ci-dessous est l'exemple complet

<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];
};

Vous pouvez consulter un exemple de travail en direct de mon code

1> ALLEZ À https://www.notesgen.com (utilisez le bureau)

2> Créez votre compte étudiant

3> ALLER À Mon compte / Mes téléchargements

4> Cliquez sur Mes connexions

Changer le hachage est similaire à pousser l'état history.pushStatequi déclenche l' popstateévénement. En appuyant et en revenant sur le navigateur, ces états apparaîtront et pousseront, vous n'aurez donc besoin d'aucun autre gestionnaire personnalisé.

PS: Vous pouvez ajouter du style CSS à :targetpartir de votre activeclasse. L' window.addEventListener('popstate'ici se connecte juste pour vous montrer l'événement mais le event.statesera toujours nul dans ce cas.

Exécutez un extrait de code, essayez de naviguer dans les onglets, puis utilisez les boutons Précédent et Suivant du navigateur.

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

première chose dont vous avez besoin, empêchez le lien de soumettre l'url dans l'historique par $ event.preventDefualt () dans l'événement click et personnalisez l'historique avec history.pushState (data, title, url) .

Dans js, nous avons un événement qui nous aide à contrôler l'événement arrière et avant par utilisateur. Ce nom d'événement est "popstate". vous pouvez l'utiliser par window.addEventListener ('popstate', callback) . dans la fonction de rappel, vous pouvez activer et désactiver l'onglet (ajouter et supprimer une classe) et extraire l'url.

Je montre cela avec un exemple de code. pour mieux faire et comprendre, essayez-le sur un serveur ou sur un serveur local car là-dedans, le changement d'URL est limité:

$('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>