Browser Zurück / Weiter-Schaltfläche zum Navigieren zwischen Registerkarten

Ich bekomme viele Beschwerden von den Benutzern, dass sie es ärgerlich finden, wenn sie meine jQuery-basierten Registerkarten verwenden, wenn sie in ihrem Browser zurückschlagen, nicht zur vorherigen Registerkarte, sondern zur vorherigen Seite zu wechseln . Ich habe die folgenden vorherigen / nächsten Schaltflächen hinzugefügt, aber nicht genug. Wie kann ich meine Schaltflächen so konfigurieren, dass Benutzer zur vorherigen Registerkarte und nicht zur vorherigen Seite wechseln, wenn sie auf den Zurückpfeil des Browsers klicken? Sie können es hier testen .

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

Sie können den Verlauf verwenden.

Drücken Sie einen Verlaufsstatus, wenn eine neue Registerkarte geöffnet wird

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

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

Ohne Ihren vollständigen Code kann ich Ihnen kein maßgeschneidertes Beispiel geben, aber Sie können einfach Anker-Tags zu allen Registerkarten hinzufügen, die div enthalten.

Dadurch wird die URL jedes Mal aktualisiert, wenn ein Benutzer auf einen Tab-Link klickt. Diese URL-Änderungen werden im Browserverlauf gespeichert und beim Rückwärtsnavigieren abgerufen.

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

Die aktualisierte URL sieht bei jedem Klicken auf eine Registerkarte folgendermaßen aus:

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4

Auf der einen Seite ist Ihre nächste Tab-Funktion in Javascript geschrieben, und auf der anderen Seite verwendet die Zurück-Schaltfläche im Browser den Browserverlauf, sodass dies für Ihre Funktionen irrelevant ist und Sie überhaupt nicht zum vorherigen Tab gelangen können.

Sie haben also zwei Möglichkeiten, um dies zu erreichen:

1. Versuchen Sie, jeden Schritt auf eine andere Seite zu laden, indem Sie den Browser aktualisieren, damit die Seite im Browserverlauf gespeichert wird. Durch Drücken der Zurück-Taste können Sie den vorherigen Schritt sehen

2. Sie sollten eine "vorherige" Schaltfläche haben, um den vorherigen Schritt genau wie Ihre nächste Schritt-Schaltfläche zu sehen

Ich habe Bootsrap-Tabs mit Browser-Tab-Navigation verwendet. Das vollständige Beispiel ist unten

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

Sie können das Live-Arbeitsbeispiel meines Codes überprüfen

1> GEHE ZU https://www.notesgen.com (Desktop verwenden)

2> Erstellen Sie Ihr Konto als Schüler

3> GEHE ZU Mein Konto / Meine Downloads

4> Klicken Sie auf Meine Verbindungen

Das Ändern des Hash ähnelt dem Push-Status, der history.pushStatedas popstateEreignis auslöst . Wenn Sie im Browser vor und zurück drücken, werden diese Status angezeigt und verschoben, sodass Sie keinen anderen benutzerdefinierten Handler benötigen.

PS: Sie können :targetIhrer activeKlasse einen CSS-Stil hinzufügen . Das window.addEventListener('popstate'hier protokolliert nur, um Ihnen das Ereignis anzuzeigen, aber das event.statewird in diesem Fall immer null sein.

Führen Sie ein Code-Snippet aus , und navigieren Sie durch die Registerkarten. Verwenden Sie dann die Schaltflächen zum Zurück- und Weiterleiten des Browsers.

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

Verhindern Sie als Erstes, dass der Link die URL im Verlauf von $ event.preventDefualt () im Klickereignis übermittelt, und passen Sie den Verlauf mit history.pushState (Daten, Titel, URL) an .

In js haben wir ein Ereignis, das uns hilft, das Vorwärts- und Rückwärtsereignis durch den Benutzer zu steuern. Dieser Ereignisname lautet "popstate". Sie können es mit window.addEventListener ('popstate', Rückruf) verwenden . In der Rückruffunktion können Sie die Registerkarte aktivieren und deaktivieren (Klasse hinzufügen und entfernen) und die URL extrahieren.

Ich zeige dies mit einem Beispielcode. Um es besser zu machen und zu verstehen, versuchen Sie es auf einem Server oder einem lokalen Server, da das Ändern der URL hier begrenzt ist:

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