Sekmeler arasında gezinmek için tarayıcı geri / sonraki düğmesi

Kullanıcılardan jQuery tabanlı sekmelerimi kullandıklarında, tarayıcılarına geri döndüklerinde önceki sekmeye değil, önceki sayfaya gittikleri rahatsız edici bulduklarından çok fazla şikayet alıyorum . Aşağıdaki önceki / sonraki düğmeleri ekledim ama yeterli değil. Kullanıcıların tarayıcı geri okunu tıkladıklarında önceki sayfa yerine önceki sekmeye gitmeleri için düğmeleriimi nasıl yeniden yapılandırabilirim. Burada test edebilirsiniz .

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

Geçmiş'i kullanabilirsiniz.

Yeni bir sekme açıldığında geçmiş durumunu aktarma

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

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

Tam kodunuz olmadan size ısmarlama bir örnek veremem, ancak div içeren her sekmeye ankraj etiketleri ekleyebilirsiniz.

Bu, kullanıcı bir sekme bağlantısını her tıkladığında URL'yi güncelleyecektir. Bu URL değişiklikleri tarayıcı geçmişinde saklanır ve geriye doğru giderken hatırlanır.

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

Bir sekmeyi her tıkladığınızda güncellenen URL şöyle görünür:

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4

bir tarafta, sonraki sekme işleviniz javascript ile yazılır ve diğer tarafta, tarayıcıdaki geri düğmesi tarayıcı geçmişini kullanır, bu nedenle işlevlerinizle alakasızdır ve sizi bir önceki sekmeye hiç götüremez.

Yani bunu gerçekleştirmenin iki yolu var:

1: tarayıcıyı yenileyerek her adımı farklı bir sayfaya yüklemeyi deneyin, böylece sayfa tarayıcı geçmişine kaydedilir ve geri düğmesine basarak önceki adımı görebilirsiniz

2: tıpkı bir sonraki adım düğmeniz gibi önceki adımı görmek için bir "önceki" düğmeniz olmalıdır

Aşağıda tarayıcı sekmesinde gezinme ile bot sekmeleri kullandım tam bir örnek

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

Kodumun canlı çalışan örneğini kontrol edebilirsiniz

1> https://www.notesgen.com adresine gidin (masaüstünü kullanın)

2> Hesabınızı öğrenci olarak oluşturun

3> Hesabım / İndirilenlerime Git

4> Bağlantılarım'ı tıklayın

Karmayı değiştirmek, olayı history.pushStatetetikleyen itme durumuna benzer popstate. Tarayıcıda ileri ve geri vurmak bu durumları patlatacak ve zorlayacak, böylece başka bir özel işleyiciye ihtiyacınız olmayacaktır.

Not: Eğer css stil ekleyebilirsiniz :targetsenin dan activesınıfında. window.addEventListener('popstate'Burada sadece Günlüklerde olayı göstermek için ama event.stateher zaman bu durumda boş olacaktır.

Kod snippet'ini çalıştırın sekmeler arasında gezinmeyi deneyin ve ardından tarayıcı geri ve ileri düğmelerini kullanın.

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

İhtiyacınız olan ilk şey, bağlantının tarihteki url'yi $ event.preventDefualt () ile click eventinde göndermesini önleyin ve geçmişi history.pushState (veri, başlık, url) ile özelleştirin .

Js'de geri ve ileri olayı kullanıcı tarafından kontrol etmemize yardımcı olan bir etkinliğimiz vardır. Bu etkinlik adı "popstate". Eğer bu durumu kullanabilirsiniz window.addEventListener ( 'popstate', geri arama) . Geri arama işlevinde sekmeyi etkinleştirebilir ve devre dışı bırakabilirsiniz (sınıf ekleme ve kaldırma) ve url'yi ayıklayabilirsiniz.

Bunu örnek bir kodla gösteririm. daha iyi yapmak ve anlamak için, bir sunucuda veya yerel sunucuda deneyin, çünkü burada değişen URL burada sınırlıdır:

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