pahelp po kasi po di sya natutuloy sa mga link or page di po nadidisplay yun output ko... breadcrumb ko ok naman nag fufunction goods naman problima ko is yun link o page ko di nag oouput,, pero kapag tinatanggal ko yun breadcrumb ko javascript nagdidisplay yun link o page pero kapag binabalik ko yun javascript ng breadcrum di na nman sya ang didisplay yun link o page...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X_UA-Compatible" content ="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- <link href="../css/style.css" rel="stylesheet"> -->
<script src="../js/bootstrap.bundle.js"></script>
</head>
<body class="m-0 border-0 bd-example m-0 border-0 ">
<!-- Example Code -->
<nav class="navbar navbar-expand-sm p-0 fixed-top " style="background:gray;">
<div class="container" id="">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler" style="height:25px; width:35px;"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
<span class="navbar-toggler-icon" style="height:10px; width:15px;" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" name="navlist" id="">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="../user/dashboard.php">Home</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
Tracking
</a>
<ul class="dropdown-menu" >
<li><a class="dropdown-item" href="#">DTS</a></li>
<li><a class="dropdown-item" href="../user/voucher.php">LDDAP_ADA</a></li>
<!-- <li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="../user/voucher.php">LDDAP-ADA</a>
</li> -->
</ul>
</li>
<li class="nav-item">
<a class="nav-link" id="test" href="../user/voucher.php">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../user/voucher.php">About</a>
</li>
</ul>
<form class="d-flex" role="search">
<input
class="form-control me-2" style="height:30px;"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success pt-1 me-3" style="height:30px;" type="submit">
<h6>Search</h6>
</button>
</form>
<div class="dropdown" id="idnav">
<a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="../img/eslava.jpg" alt="" width="50" height="45" class=" p-1 me-2 rounded-5">
<strong><?php echo $username; ?></strong>
</a>
<ul class="dropdown-menu text-small shadow" id="idnav">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Edit Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="../login.php">Sign out</a></li>
</ul>
</div>
</div>
</div>
</nav >
<!-- End Nav -->
<!-- Start breadcrumb -->
<div class="pt-5 mt-3" id="brredcrumb">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ul class="breadcrumb" id="brdcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</a></li>
</ul>
</nav>
</div>
<script>
// Get the breadcrumb element
var breadcrumb = document.getElementById("brdcrumb");
// Get all the links inside the navbar
var links = document.querySelectorAll(".navbar-nav a");
// Iterate over each link
for (var i = 0; i < links.length; i++) {
// Add a click event listener to each link
links.addEventListener("click", function(e) {
e.preventDefault();
// Get the text of the clicked link
var currentPage = this.textContent;
// Create a new list item for the breadcrumb
var li = document.createElement("li");
li.setAttribute("class", "breadcrumb-item active");
li.setAttribute("aria-current", "page");
li.innerText = currentPage;
// Append the new list item to the breadcrumb
document.getElementsByTagName("li").innerText =currentPage;
breadcrumb.appendChild(li);
// Get the previous list item in the breadcrumb
var previousElmt = li.previousElementSibling;
// Update the previous list item to be a link
previousElmt.innerHTML = "<a href='#'>" + previousElmt.innerText + "</a>";
previousElmt.classList.remove("active");
previousElmt.removeAttribute("aria-current");
// Clear the breadcrumb after the clicked link
var nxtsblinings = [];
function sibling() {
var nxtsiblingElmt = this.nextElementSibling;
nxtsblinings.push(nxtsiblingElmt);
while (true) {
if (nxtsiblingElmt.nextElementSibling == null) {
break;
} else {
nxtsiblingElmt = nxtsiblingElmt.nextElementSibling;
nxtsblinings.push(nxtsiblingElmt);
}
}
for (var i = 0; i < nxtsblinings.length; i++) {
nxtsblinings.removeAttribute("aria-current");
nxtsblinings.classList.remove("active");
nxtsblinings.remove();
}
this.innerHTML = this.innerText;
this.classList.add("active");
this.setAttribute("arial-current", "page");
this.removeEventListener("click", sibling);
}
// Add a click event listener to the previous list item
previousElmt.addEventListener("click", sibling);
});
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X_UA-Compatible" content ="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- <link href="../css/style.css" rel="stylesheet"> -->
<script src="../js/bootstrap.bundle.js"></script>
</head>
<body class="m-0 border-0 bd-example m-0 border-0 ">
<!-- Example Code -->
<nav class="navbar navbar-expand-sm p-0 fixed-top " style="background:gray;">
<div class="container" id="">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler" style="height:25px; width:35px;"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
<span class="navbar-toggler-icon" style="height:10px; width:15px;" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" name="navlist" id="">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="../user/dashboard.php">Home</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
Tracking
</a>
<ul class="dropdown-menu" >
<li><a class="dropdown-item" href="#">DTS</a></li>
<li><a class="dropdown-item" href="../user/voucher.php">LDDAP_ADA</a></li>
<!-- <li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="../user/voucher.php">LDDAP-ADA</a>
</li> -->
</ul>
</li>
<li class="nav-item">
<a class="nav-link" id="test" href="../user/voucher.php">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../user/voucher.php">About</a>
</li>
</ul>
<form class="d-flex" role="search">
<input
class="form-control me-2" style="height:30px;"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success pt-1 me-3" style="height:30px;" type="submit">
<h6>Search</h6>
</button>
</form>
<div class="dropdown" id="idnav">
<a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="../img/eslava.jpg" alt="" width="50" height="45" class=" p-1 me-2 rounded-5">
<strong><?php echo $username; ?></strong>
</a>
<ul class="dropdown-menu text-small shadow" id="idnav">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Edit Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="../login.php">Sign out</a></li>
</ul>
</div>
</div>
</div>
</nav >
<!-- End Nav -->
<!-- Start breadcrumb -->
<div class="pt-5 mt-3" id="brredcrumb">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ul class="breadcrumb" id="brdcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</a></li>
</ul>
</nav>
</div>
<script>
// Get the breadcrumb element
var breadcrumb = document.getElementById("brdcrumb");
// Get all the links inside the navbar
var links = document.querySelectorAll(".navbar-nav a");
// Iterate over each link
for (var i = 0; i < links.length; i++) {
// Add a click event listener to each link
links.addEventListener("click", function(e) {
e.preventDefault();
// Get the text of the clicked link
var currentPage = this.textContent;
// Create a new list item for the breadcrumb
var li = document.createElement("li");
li.setAttribute("class", "breadcrumb-item active");
li.setAttribute("aria-current", "page");
li.innerText = currentPage;
// Append the new list item to the breadcrumb
document.getElementsByTagName("li").innerText =currentPage;
breadcrumb.appendChild(li);
// Get the previous list item in the breadcrumb
var previousElmt = li.previousElementSibling;
// Update the previous list item to be a link
previousElmt.innerHTML = "<a href='#'>" + previousElmt.innerText + "</a>";
previousElmt.classList.remove("active");
previousElmt.removeAttribute("aria-current");
// Clear the breadcrumb after the clicked link
var nxtsblinings = [];
function sibling() {
var nxtsiblingElmt = this.nextElementSibling;
nxtsblinings.push(nxtsiblingElmt);
while (true) {
if (nxtsiblingElmt.nextElementSibling == null) {
break;
} else {
nxtsiblingElmt = nxtsiblingElmt.nextElementSibling;
nxtsblinings.push(nxtsiblingElmt);
}
}
for (var i = 0; i < nxtsblinings.length; i++) {
nxtsblinings.removeAttribute("aria-current");
nxtsblinings.classList.remove("active");
nxtsblinings.remove();
}
this.innerHTML = this.innerText;
this.classList.add("active");
this.setAttribute("arial-current", "page");
this.removeEventListener("click", sibling);
}
// Add a click event listener to the previous list item
previousElmt.addEventListener("click", sibling);
});
}
</script>