What's new

Breadcrumb patulong pls baka po may nakakaalam

L

loktoy

Eternal Poster
Joined
Oct 20, 2014
Posts
1,168
Solutions
2
Reaction
103
Points
497
Age
30
gusto ko sana na kapag cliniclick ko yun sa Navbar ko ay mapupunta sya dun sa page.php ko...
kaso di po napupunta po..

ito po code ko

<!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" id="">
<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" class="">
<a class="nav-link" href="../user/contact.php">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../user/about.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>
var breadcrumb = document.getElementById("brdcrumb");
var links = document.querySelectorAll("a");
for (var i = 0; i <links.length; i++){
links.addEventListener("click", function(e) {
e.preventDefault();

var currentPage = this.textContent;
var li = document.createElement("li");
li.setAttribute("class","breadcrumb-item");
li.classList.add("active");
li.setAttribute("aria-current","page");
li.innerText = currentPage;

breadcrumb.appendChild(li);
var previousElmt = li.previousElementSibling;
previousElmt.innerHTML = "<a href='#'>"+previousElmt.innerText+" </a>"
previousElmt.classList.remove("active");
previousElmt.removeAttribute("aria-current");
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.removeAttribute("class");
nxtsblinings.remove();
}
this.innerHTML = this.innerText;
this.classList.add("active");
this.setAttribute("arial-current","page");
this.removeEventListener("click",sibling);
};
previousElmt.addEventListener("click",sibling);
});

};
</script>

</body>
</html>
 
Based on the code you provided, it seems that you are trying to create a breadcrumb navigation system. When a user clicks on a link, the corresponding page should be displayed in the breadcrumb.

One issue I noticed in your code is that you have duplicated "class" attributes in some of your HTML elements. For example, in the following line:
HTML: 
<li class="nav-item" class="">
There are two "class" attributes. To fix this, you should remove one of the "class" attributes so that it looks like this:
HTML: 
<li class="nav-item">

Regarding your question about navigating to the "page.php" file when a user clicks on a link in the navbar, it seems that you haven't provided the relevant code for that. In order to navigate to the "page.php" file, you need to update the href attribute of the corresponding <a> tag.

For example, if you want the "Tracking" dropdown item to navigate to the "page.php" file, you need to update this line:
HTML: 
<a class="dropdown-item" href="#">DTS</a>
to:
HTML: 
<a class="dropdown-item" href="../user/page.php">DTS</a>
Make sure that the file path in the href attribute is correct, based on the location of the "page.php" file.

Similarly, you need to update the href attribute of other links in your navbar to point to the correct file.

Once you have updated the href attributes, the links should navigate to the corresponding pages when clicked, and the breadcrumb should be updated accordingly.
 
🤖 said:
Based on the code you provided, it seems that you are trying to create a breadcrumb navigation system. When a user clicks on a link, the corresponding page should be displayed in the breadcrumb.

One issue I noticed in your code is that you have duplicated "class" attributes in some of your HTML elements. For example, in the following line:
HTML: 
<li class="nav-item" class="">
There are two "class" attributes. To fix this, you should remove one of the "class" attributes so that it looks like this:
HTML: 
<li class="nav-item">

Regarding your question about navigating to the "page.php" file when a user clicks on a link in the navbar, it seems that you haven't provided the relevant code for that. In order to navigate to the "page.php" file, you need to update the href attribute of the corresponding <a> tag.

For example, if you want the "Tracking" dropdown item to navigate to the "page.php" file, you need to update this line:
HTML: 
<a class="dropdown-item" href="#">DTS</a>
to:
HTML: 
<a class="dropdown-item" href="../user/page.php">DTS</a>
Make sure that the file path in the href attribute is correct, based on the location of the "page.php" file.

Similarly, you need to update the href attribute of other links in your navbar to point to the correct file.

Once you have updated the href attributes, the links should navigate to the corresponding pages when clicked, and the breadcrumb should be updated accordingly.
Click to expand...
pero wala pa rin nagyayari po
 
loktoy said:
pero wala pa rin nagyayari po
Click to expand...
I apologize for the confusion. Upon reviewing your code, it appears that you are trying to dynamically update the breadcrumb based on the link that the user clicks on. However, the implementation of the breadcrumb functionality is incomplete in your code.

To achieve the desired functionality, you need to modify your JavaScript code. Here's an updated version of the code with comments explaining the changes:

HTML: 
<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[i].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
      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[i].removeAttribute("aria-current");
          nxtsblinings[i].classList.remove("active");
          nxtsblinings[i].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>

Make sure to replace your existing JavaScript code with the updated code above.

With this updated code, when a user clicks on a link in the navbar, the breadcrumb will be dynamically updated to reflect the clicked link. Each clicked link will be displayed as an active item in the breadcrumb, and the previous items will become clickable links.
 
🤖 said:
I apologize for the confusion. Upon reviewing your code, it appears that you are trying to dynamically update the breadcrumb based on the link that the user clicks on. However, the implementation of the breadcrumb functionality is incomplete in your code.

To achieve the desired functionality, you need to modify your JavaScript code. Here's an updated version of the code with comments explaining the changes:

HTML: 
<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[i].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
      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[i].removeAttribute("aria-current");
          nxtsblinings[i].classList.remove("active");
          nxtsblinings[i].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>

Make sure to replace your existing JavaScript code with the updated code above.

With this updated code, when a user clicks on a link in the navbar, the breadcrumb will be dynamically updated to reflect the clicked link. Each clicked link will be displayed as an active item in the breadcrumb, and the previous items will become clickable links.
Click to expand...
di pa rin po sya natutulog sa page nya patutungohan breadcrumb is ok nag ffunction sya sa mga page lang
 

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development error help how html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 5
    Replies
  • 258
    Views
  • 2
    Participants
Last reply from:
loktoy

New Topics

Popular On This Forum

Online statistics

Members online
1,162
Guests online
4,847
Total visitors
6,009
Back
Top