We Keep Coding

Close the mobile menu in id links

This is the mobile menu I wrote for my site.
Sometimes some links are id. (Example: herf="#id")
I want the menu to be closed automatically when the user clicks when there are such links. (Close the hamburger icon as well.)
In JavaScript, can you tell me what to do?
/* eslint-env browser */
(function() {
'use strict';
document.addEventListener('DOMContentLoaded', function() {
let hamburger = document.querySelector('.js-hamburger');
let hamburgerMenu = function () {
document.querySelector('.js-navs').classList.toggle('is-open');
};
if (hamburger) {
hamburger.addEventListener('click', hamburgerMenu, false);
}
});
})();
<link href="https://restaurant-landing.surge.sh/styles/main.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="o-section c-section--header" style="background-image: none;">
<div class="o-section__wrapper">
<div class="c-header">
<div class="c-header__col">
<div class="c-hamburger">
<input class="c-hamburger__checkbox js-hamburger" type="checkbox" aria-label="Menu" />
<span class="c-hamburger__icon"></span>
<span class="c-hamburger__icon"></span>
<span class="c-hamburger__icon"></span>
</div>
</div>
<div class="c-header__col">
<div class="c-header__wrap js-navs">
<ul class="s-nav">
<li>
WHY US
</li>
<li>
MENU
</li>
<li>
POPULAR DISHES
</li>
<li>
BOOK
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</div>
</div>
</header>

I think this does the trick:
const hashLinks = document.querySelectorAll('.s-nav a');
hashLinks.forEach((element) => {
if(element.hash[0] == '#') {
element.addEventListener('click', hamburgerMenu);
}
});
How it works:
gets all the links inside your menu
iterates over each element
if the element's link has a hashtag as the first character
assign a click event listener to toggle the menu

/* eslint-env browser */
(function() {
'use strict';
document.addEventListener('DOMContentLoaded', function() {
let hamburger = document.querySelector('.js-hamburger');
let hamburgerMenu = function () {
document.querySelector('.js-navs').classList.toggle('is-open');
};
if (hamburger) {
hamburger.addEventListener('click', hamburgerMenu, false);
};
$(".s-nav a").each((indx,link) => {
if(link.hash.startsWith("#")) link.addEventListener("click",hamburgerMenu);
});
});
})();
<link href="https://restaurant-landing.surge.sh/styles/main.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="o-section c-section--header" style="background-image: none;">
<div class="o-section__wrapper">
<div class="c-header">
<div class="c-header__col">
<div class="c-hamburger">
<input class="c-hamburger__checkbox js-hamburger" type="checkbox" aria-label="Menu" />
<span class="c-hamburger__icon"></span>
<span class="c-hamburger__icon"></span>
<span class="c-hamburger__icon"></span>
</div>
</div>
<div class="c-header__col">
<div class="c-header__wrap js-navs">
<ul class="s-nav">
<li>
WHY US
</li>
<li>
MENU
</li>
<li>
POPULAR DISHES
</li>
<li>
BOOK
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</div>
</div>
</header>

active anchor link not being highlighted

I have been staring at this code for far too long, unfortunately I do not see the problem.
I am trying to get the active menu entry highlighted when the relevant div gets scrolled into view. But nothing is happening and no errors are being thrown in the console.
My menu html:
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
An example div:
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9"></div>
</div>
My jquery/js:
if ($('.LeftAnchorNav').length > 0) {
// prepare the variables
var lastID;
var anchorMenu = $(".LeftAnchorNavMenu");
var anchorMenuHeight = anchorMenu.outerHeight() + 100;
var anchorMenuItems = anchorMenu.find(".leftlink");
var anchorMenuItemsTarget = anchorMenuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// bind everything to the scrolling
$(window).scroll(function () {
// get anchornav container scroll position and add buffer
var fromTop = $(this).scrollTop() + anchorMenuHeight + 300;
// get ID of the current scroll item
var currentItem = anchorMenuItemsTarget.map(function () {
if ($(this).offset().top < fromTop)
return this;
});
// get the ID of the current element
currentItem = currentItem[currentItem.length - 1];
var id = currentItem && currentItem.length ? currentItem[0].id : "";
if (lastID !== id) {
lastID = id;
// Set/remove active class
anchorMenuItems.removeClass("highlightleftnavactive")
anchorMenuItems.filter("[href='#" + id + "']").addClass("highlightleftnavactive");
}
});
}

It's quite fiddly to do the arithmetic for scrolling so this snippet uses IntersectionObserver instead. This has the added benefit of less processing overhead as it just gets informed when the elements come in or go out of view, not every time the user scrolls a bit.
It sets up the observer to observe when any of the relevant elements come into or go out of the viewport. When alerted to that it adds or removes the highlighting class to the related navbar link.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<style>
.LeftAnchorNav {
position: fixed;
z-index:1;
}
.tall {
width: 100vw;
height: 100vh;
background-image: linear-gradient(cyan, magenta, yellow, black);
}
.highlightleftnavactive {
background-color: yellow;
}
</style>
</head>
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<div class="tall"></div>
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">
An example block coming into and going out of view it belongs to the About us link in the navbar</div>
</div>
<div class="tall"></div>
<script>
let callback = (entries) => {
entries.forEach(entry => {
let id = entry.target.firstChild.id;
let leftLink = document.querySelector("a.leftlink[href='#"+ id + "']");
if (entry.isIntersecting) { leftLink.classList.add('highlightleftnavactive');}
else { leftLink.classList.remove('highlightleftnavactive');}
});
};
const observer = new IntersectionObserver(callback);
const anchorBlocks = document.querySelectorAll('.anchorblock');
anchorBlocks.forEach( (anchorBlock) => {
observer.observe(anchorBlock);
});
</script>

How to make Tab loop using JQuery and JavaScript?

I have created a tab using JQuery and JavaScript. It's working fine but I need one modification on that.
I want a tab loop type like once we reached the last one it should go to the first tab when I click the next button. but now it's not looping. I tried so many types but I am not getting the output what I expected. I have added my code here. anyone helps me to fix this.
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault(), $("li.active").next("li").trigger("click");
}),
$(".previous").click(function (e) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

Check next & prev element is there
$("li.active").next("li").length)
$("li.active").prev("li").length)
$(document).ready(function () {
$(document).ready(function() {
$(".tab_content div:not(:first)").toggle(),
$(".tabs li").click(function() {
var e = $(this).index();
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function(e) {
if ($("li.active").next("li").length) {
e.preventDefault(), $("li.active").next("li").trigger("click");
} else {
e.preventDefault(), $("li:first-child").trigger("click");
}
}),
$(".previous").click(function(e) {
if ($("li.active").prev("li").length) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
} else {
e.preventDefault(), $("li:last-child").trigger("click");
}
});
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
.tabs_indicators li.active{background:red;}
.tabs li.active{color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

You just have to add 2 checks:
For the "next" case, if there is any next <li> element
For the "prev" case, if the is any previous <li> element
Just change your js like this:
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
debugger;
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

Slider current/total before onclick change

It's foundation zurb 6/orbit slider.
How to display count current/total before the slidechange.zf.orbit event? Should I add some event before, on window load or something else?
First slide shows without counter, only when click it visible.
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><li></li></button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><li></li></button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../images/demo-img/event-demo.png" alt="">
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
<div class="slider-number"></div>
</div>
<script>
(function() {
function slideNumber() {
var totalItems = $('li.orbit-slide').length;
var currentItem = $('li.orbit-slide.is-active').index() - 1;
$('.slider-number').html(currentItem + '/' + totalItems);
}
document.addEventListener("DOMContentLoaded", function() {
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
});
})();
</script>

The DOMContentLoaded event is just an event you are looking for.
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
So call the slideNumber() function one more time at this event:
<script>
document.addEventListener("DOMContentLoaded", function() {
function slideNumber() {
var totalItems = $('li.orbit-slide').length;
var currentItem = $('li.orbit-slide.is-active').index() - 1;
$('.slider-number').html(currentItem + '/' + totalItems);
}
slideNumber();
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
});
</script>
Foundation uses jQuery. So you can use the .ready() method instead of document.addEventListener("DOMContentLoaded" .... It looks like $(function() {.
Do not force a function to define totalItems and $('.slider-number')with each new call. Use global variables instead.
<script>
$(function() {
var totalItems = $('li.orbit-slide').length;
var selectNumber = $('.slider-number');
slideNumber();
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
function slideNumber() {
var currentItem = $('li.orbit-slide.is-active').index() - 1;
sliderNumber.html(currentItem + '/' + totalItems);
};
});
</script>
Please check the result: http://codepen.io/glebkema/pen/XjrLZj
$(document).foundation(); // initialize every Foundation plugin
var totalItems = $('li.orbit-slide').length;
var selectNumber = $('.slider-number');
slideNumber();
$('.orbit').on('slidechange.zf.orbit', slideNumber);
function slideNumber() {
var currentItem = $('li.orbit-slide.is-active').index() - 1;
selectNumber.text(currentItem + '/' + totalItems);
}
.slider-number {
font-size: 36px;
text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">
<div class="orbit" role="region" data-orbit data-timer-delay="3000" data-use-m-u-i="false">
<ul class="orbit-container">
<button class="orbit-previous">◀︎</button>
<button class="orbit-next">▶︎</button>
<li class="orbit-slide is-active">
<img class="orbit-image" src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://via.placeholder.com/900x300/96c/c9f/?text=4" alt="">
</li>
</ul>
<nav class="orbit-bullets">
<button data-slide="0" class="is-active"></button>
<button data-slide="1"></button>
<button data-slide="2"></button>
<button data-slide="3"></button>
</nav>
<div class="slider-number"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>

Access to specific items with glide.js

I'm using glide.js and i'd appreciate some ideas to get this working.
I need to connect (items < slider 1 < page 1) to (items < slider 2 < page 2). The subject: (e.g.) If i click on 2nd item from the 1st page, then the 2nd page is shown and the 2nd item from the 2nd page is also shown. Here's some code:
Page 1
// Glide Page 1
var glide = $('.slider').glide().data('api_glide');
$(window).on('keyup', function(key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider__arrows-item').on('click', function() {
console.log(glide.current());
});
<!-- Page 1 -->
<link href="http://glide.jedrzejchalubek.com/css/glide.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://glide.jedrzejchalubek.com/js/jquery.glide.min.js"></script>
<body bgcolor="#999">
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item">
<a class="button" href="http://www.example.com/Page_2.php" id="#content_01">Access to Content 1 on Page 2</a>
</li>
<li class="slider__item ">
<a class="button " href="http://www.example.com/Page_2.php" id="#content_02">Access to Content 2 on Page 2</a>
</li>
<li class="slider__item ">
<a class="button" href="http://www.example.com/Page_2.php" id="#content_03">Access to Content 3 on Page 2</a>
</li>
</ul>
</div>
Page 2
// Glide Page 2
var glide = $('.slider').glide().data('api_glide');
$(window).on('keyup', function(key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider__arrows-item').on('click', function() {
console.log(glide.current());
});
<!-- Page 2 -->
<link href="http://glide.jedrzejchalubek.com/css/glide.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://glide.jedrzejchalubek.com/js/jquery.glide.min.js"></script>
<body bgcolor="#000">
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item" id=“#content_01”>
<div>Some Content</div>
</li>
<li class="slider__item" id=“#content_02”>
<div>Some Content</div>
</li>
<li class="slider__item" id=“#content_03”>
<div>Some Content</div>
</li>
</ul>
</div>
Thanks!