ปุ่มย้อนกลับ / ถัดไปของเบราว์เซอร์เพื่อนำทางระหว่างแท็บต่างๆ

ฉันได้รับการร้องเรียนจำนวนมากจากผู้ใช้ว่าเมื่อพวกเขาใช้แท็บที่ใช้ 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

หากไม่มีรหัสเต็มของคุณฉันไม่สามารถยกตัวอย่าง bespoke ให้คุณได้ แต่คุณสามารถเพิ่มแท็ก anchor ในแต่ละแท็บที่มี 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: พยายามโหลดแต่ละขั้นตอนในหน้าอื่นด้วยการรีเฟรชเบราว์เซอร์ดังนั้นหน้าจะบันทึกในประวัติเบราว์เซอร์และกดปุ่มย้อนกลับคุณจะเห็นขั้นตอนก่อนหน้า

2nd: คุณควรมีปุ่ม "ก่อนหน้า" เพื่อดูขั้นตอนก่อนหน้าเช่นเดียวกับปุ่มขั้นตอนถัดไปของคุณ

ฉันได้ใช้แท็บ bootsrap กับการนำทางแท็บเบราว์เซอร์ด้านล่างเป็นตัวอย่างที่สมบูรณ์

<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ชั้นเรียนของคุณ window.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>