Przycisk Wstecz / Dalej przeglądarki, aby poruszać się między kartami

Dostaję wiele skarg od użytkowników, że kiedy korzystają z moich kart opartych na jQuery, uważają za denerwujące, że kiedy wracają do przeglądarki, nie przechodzą do poprzedniej karty, ale do poprzedniej strony . Dodałem następujące przyciski poprzedni / następny, ale za mało. Jak mogę ponownie skonfigurować moje przyciski, aby użytkownicy przechodzili do poprzedniej karty zamiast do poprzedniej strony po kliknięciu strzałki wstecz przeglądarki. Możesz to przetestować tutaj .

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

Możesz użyć historii.

Wciśnij stan historii po otwarciu nowej karty

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

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

Bez pełnego kodu nie mogę podać niestandardowego przykładu, ale możesz po prostu dodać tagi zakotwiczenia do każdej karty zawierającej div.

Spowoduje to zaktualizowanie adresu URL za każdym razem, gdy użytkownik kliknie łącze do karty. Te zmiany adresów URL zostaną zapisane w historii przeglądarki i zostaną przywrócone podczas nawigacji wstecz.

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

Zaktualizowany adres URL będzie wyglądał tak po każdym kliknięciu karty:

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4

z jednej strony następna funkcja karty jest napisana w javascript, a z drugiej strony przycisk Wstecz w przeglądarce korzysta z historii przeglądarki, więc nie ma to znaczenia dla twoich funkcji i nie może w ogóle przejść do poprzedniej karty.

Masz dwa sposoby, aby to osiągnąć:

Po pierwsze: spróbuj załadować każdy krok na innej stronie, odświeżając przeglądarkę, aby strona zapisała się w historii przeglądarki i naciskając przycisk Wstecz, można zobaczyć poprzedni krok

2.: powinieneś mieć przycisk „poprzedni”, aby zobaczyć poprzedni krok, tak jak przycisk następnego kroku

Użyłem kart bootrap z nawigacją w przeglądarce poniżej, to kompletny przykład

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

Możesz sprawdzić działający przykład mojego kodu na żywo

1> PRZEJDŹ DO https://www.notesgen.com (użyj pulpitu)

2> Utwórz konto jako student

3> PRZEJDŹ DO Moje konto / Moje pliki do pobrania

4> Kliknij Moje połączenia

Zmiana skrótu jest podobna do stanu wypychania, history.pushStatektóry wyzwala popstatezdarzenie. Naciskanie do tyłu i do przodu w przeglądarce spowoduje wyskakiwanie i popychanie tych stanów, więc nie będziesz potrzebować żadnego innego niestandardowego modułu obsługi.

PS: Możesz dodać styl css do :targetswojej activeklasy. Te window.addEventListener('popstate'tutaj tylko dzienniki pokazać zdarzenia, ale event.statezawsze będzie null w tym przypadku.

Uruchom fragment kodu, spróbuj nawigować po kartach, a następnie użyj przycisków Wstecz i Dalej.

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

pierwszą rzeczą, której potrzebujesz, jest zablokowanie linku do przesłania adresu URL do historii przez $ event.preventDefualt () w zdarzeniu click i dostosowanie historii za pomocą history.pushState (data, tytuł, adres URL) .

W js mamy wydarzenie, które pomaga nam kontrolować zdarzenie wstecz i do przodu według użytkownika. Ta nazwa zdarzenia to „popstate”. możesz go użyć przez window.addEventListener („popstate”, callback) . w funkcji wywołania zwrotnego możesz aktywować i dezaktywować kartę (dodawać i usuwać klasę) oraz wyodrębniać adres URL.

Pokazuję to za pomocą przykładowego kodu. aby lepiej zrozumieć i zrozumieć, spróbuj na serwerze lub serwerze lokalnym, ponieważ zmiana adresu URL w tym miejscu jest ograniczona:

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