Nút quay lại / tiếp theo của trình duyệt để điều hướng giữa các tab

Tôi nhận được rất nhiều lời phàn nàn từ người dùng rằng khi họ sử dụng các tab dựa trên jQuery của tôi, họ cảm thấy khó chịu khi họ quay lại trình duyệt của mình, họ không chuyển đến tab trước mà đến trang trước đó . Tôi đã thêm các nút trước / tiếp theo sau nhưng không đủ. Làm cách nào tôi có thể cấu hình lại các nút của mình để người dùng sẽ chuyển đến tab trước thay vì trang trước đó khi họ nhấp vào mũi tên quay lại của trình duyệt. Bạn có thể kiểm tra nó ở đây .

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

Bạn có thể sử dụng Lịch sử.

Đẩy trạng thái lịch sử khi một tab mới được mở

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

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/API/History_API

Nếu không có mã đầy đủ của bạn, tôi không thể cung cấp cho bạn một ví dụ riêng biệt nhưng bạn chỉ có thể thêm thẻ neo vào mỗi tab có chứa div.

Điều này sẽ cập nhật URL mỗi khi người dùng nhấp vào liên kết tab. Những thay đổi URL này sẽ được lưu trữ trong lịch sử trình duyệt và sẽ được gọi lại khi điều hướng lùi.

<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 được cập nhật sẽ trông như thế này mỗi khi bạn nhấp vào tab:

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4

ở một bên, chức năng tab tiếp theo của bạn được viết bằng javascript và ở phía bên kia, nút quay lại trong trình duyệt sử dụng lịch sử trình duyệt nên điều này không liên quan đến các chức năng của bạn và hoàn toàn không thể đưa bạn đến tab trước đó.

Vì vậy, bạn có hai cách để làm cho nó xảy ra:

Thứ 1: thử tải từng bước trong một trang khác bằng cách làm mới trình duyệt, để trang lưu trong lịch sử trình duyệt và bằng cách nhấn nút quay lại, bạn có thể thấy bước trước đó

Thứ 2: bạn nên có nút "trước" để xem bước trước giống như nút bước tiếp theo của bạn

Tôi đã sử dụng các tab bootrap với điều hướng tab trình duyệt bên dưới là ví dụ hoàn chỉnh

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

Bạn có thể kiểm tra ví dụ làm việc trực tiếp về mã của tôi

1> ĐI ĐẾN https://www.notesgen.com (sử dụng máy tính để bàn)

2> Tạo tài khoản của bạn khi còn là sinh viên

3> ĐI ĐẾN Tài khoản của tôi / Tải xuống của tôi

4> Nhấp vào Kết nối của tôi

Thay đổi hàm băm tương tự như trạng thái đẩy history.pushStategây ra popstatesự kiện. Nhấn trở lại và chuyển tiếp trên trình duyệt sẽ bật và đẩy các trạng thái này để bạn không cần bất kỳ trình xử lý tùy chỉnh nào khác.

PS: Bạn có thể thêm kiểu css :targettừ activelớp của bạn . Ở window.addEventListener('popstate'đây chỉ ghi nhật ký để hiển thị cho bạn sự kiện nhưng event.statesẽ luôn là null trong trường hợp này.

Chạy đoạn mã thử điều hướng các tab sau đó sử dụng các nút quay lại và chuyển tiếp của trình duyệt.

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

điều đầu tiên mà bạn cần, ngăn liên kết gửi url trong lịch sử bằng $ event.preventDefualt () trong sự kiện nhấp và tùy chỉnh lịch sử với history.pushState (dữ liệu, tiêu đề, url) .

Trong js, chúng tôi có một sự kiện giúp chúng tôi kiểm soát sự kiện quay lại và chuyển tiếp của người dùng. Tên sự kiện này là "popstate". bạn có thể sử dụng nó bởi window.addEventListener ('popstate', gọi lại) . trong chức năng gọi lại, bạn có thể kích hoạt và hủy kích hoạt tab (thêm và xóa lớp) và trích xuất url.

Tôi hiển thị điều này với một mã mẫu. để làm và hiểu rõ hơn, hãy thử nó trong một máy chủ hoặc máy chủ cục bộ vì trong đó việc thay đổi url ở đây bị hạn chế:

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