Назад / наступна кнопка браузера для навігації між вкладками

Я отримую багато скарг від користувачів, що коли вони використовують мої вкладки на основі jQuery, їм стає прикро, що при натисканні на браузер вони не переходять на попередню вкладку, а на попередню сторінку . Я додав наступні попередні / наступні кнопки, але недостатньо. Як я можу налаштувати свої кнопки, щоб користувачі переходили на попередню вкладку, а не на попередню сторінку, коли натискали стрілку назад в браузері. Ви можете протестувати його тут .

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

Ви можете використовувати історію.

Натисніть стан історії, коли відкриється нова вкладка

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

Довідка: https://developer.mozilla.org/en-US/docs/Web/API/History_API

Без повного коду я не можу навести вам приклад, але ви можете просто додати якірні теги до кожної вкладки, що містить div.

Це буде оновлювати URL щоразу, коли користувач натискає посилання на вкладку. Ці зміни URL-адреси зберігатимуться в історії веб-переглядача та будуть відкликані під час руху назад.

<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-адреса буде виглядати приблизно так, кожен раз, коли ви клацаєте вкладку:

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4

з одного боку, ваша наступна функція вкладки записується в JavaScript, а з іншого боку кнопка "назад" в браузері використовує історію браузера, тому це не має значення для ваших функцій і взагалі не зможе вас перейти на попередню вкладку.

Тож у вас є два способи зробити це:

1-е: спробуйте завантажити кожен крок на іншій сторінці, оновивши браузер, щоб сторінка зберігалася в історії браузера і натиснувши кнопку назад, ви побачите попередній крок

2-е: у вас повинна бути кнопка "попередній", щоб побачити попередній крок, як і ваш наступний крок

Я використовував вкладки для завантаження бокс із навігацією по вкладках браузера нижче, є повним прикладом

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

Ви можете перевірити робочий приклад мого коду

1> ПОВЕРНУТИСЯ ДО https://www.notesgen.com (використовувати робочий стіл)

2> Створіть свій обліковий запис як студент

3> Перейдіть на Мій рахунок / Мої завантаження

4> Клацніть на Мої з'єднання

Зміна хеша схожа на стан натискання, history.pushStateякий запускає popstateподію. Повернення назад і вперед у веб-переглядачі з’явиться та підштовхне ці стани, тож вам не потрібен інший користувальницький обробник.

PS: Ви можете додати стиль css до :targetсвого activeкласу. Thewindow.addEventListener('popstate' тут тільки журнали , щоб показати вам подія , але event.stateзавжди буде нульовим в цьому випадку.

Запустіть фрагмент коду, спробуйте перейдіть на вкладки, а потім скористайтесь кнопками браузера назад та вперед.

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

Перше, що вам потрібно, не допускайте посилання для надсилання URL-адреси в історії за допомогою $ event.preventDefualt () у події натискання та налаштовуйте історію за допомогою history.pushState (дані, заголовок, URL) .

У js у нас є подія, яка допомагає нам контролювати події назад і вперед користувачем. Назва цієї події "popstate". Ви можете використовувати його за допомогою window.addEventListener ('popstate', зворотний виклик) . у функції зворотного дзвінка ви можете активувати та відключити вкладку (додавання та видалення класу) та вилучення URL-адреси.

Я показую це зразком коду. для кращого розуміння та розуміння спробуйте це на сервері або локальному сервері, оскільки там зміни URL-адреси тут обмежені:

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