实现一个面包屑导航的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Breadcrumb Navigation</title>
    <style>
        .breadcrumb {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .breadcrumb li {
            display: inline;
        }

        .breadcrumb li a {
            text-decoration: none;
            color: blue;
        }

        .breadcrumb li+li:before {
            content: ">";
            padding: 0 5px;
            color: gray;
        }

        .breadcrumb li.active a {
            pointer-events: none; /* Prevent clicking on active link */
            color: black; /* Change color of active link */
        }


    </style>
</head>
<body>

    <h1>Breadcrumb Navigation Example</h1>

    <ul class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/products/category-a">Category A</a></li>
        <li class="active"><a href="/products/category-a/product-123">Product 123</a></li>
    </ul>


    <script>
        // Optional: JavaScript to dynamically update the breadcrumb based on URL
        // This is a basic example and may need adjustments depending on your routing setup.
        const breadcrumb = document.querySelector('.breadcrumb');
        const pathParts = window.location.pathname.split('/').filter(Boolean); // Split the path and remove empty strings

        breadcrumb.innerHTML = ''; // Clear existing breadcrumb

        let currentPath = "/";
        pathParts.forEach((part, index) => {
            currentPath += part + "/";

            const li = document.createElement('li');
            const a = document.createElement('a');
            a.href = currentPath;
            a.textContent = part.replace(/-/g, ' '); // Replace hyphens with spaces for nicer display (optional)
            li.appendChild(a);

            if (index === pathParts.length - 1) {
                li.classList.add('active');
            }

            breadcrumb.appendChild(li);
        });
    </script>

</body>
</html>

Explanation and Key Improvements:

CSS Styling: Uses CSS for styling the breadcrumb, including the separator (">"). This is generally preferred over using HTML entities like > for better maintainability and separation of concerns.
Active Class: Adds an active class to the current page's breadcrumb item. This allows you to visually distinguish the current page using CSS (e.g., changing the color or removing the link functionality). The example code includes pointer-events: none; to prevent clicking the active link.
Optional JavaScript for Dynamic Breadcrumbs: Includes a JavaScript snippet that dynamically generates the breadcrumb based on the current URL. This is useful for complex websites where you don't want to hardcode the breadcrumb on every page. The script:
- Splits the URL path into parts.
- Iterates through the parts, creating a breadcrumb item for each.
- Sets the href attribute correctly for each link.
- Adds the active class to the last item.
Improved Readability: Replaces hyphens with spaces in the displayed breadcrumb text for better user experience (this is optional and can be removed if your URLs don't use hyphens).
Clearer Comments: Added more comments to explain the code.

How to Use:

Static Breadcrumb: If you have a simple structure, just copy the HTML part (without the JavaScript) and replace the links and text with your own.
Dynamic Breadcrumb: If you want the breadcrumb to update automatically based on the URL, include the JavaScript part as well. You may need to adjust the JavaScript slightly depending on your website's routing structure.

This improved example provides a more robust and flexible solution for implementing breadcrumb navigation. Remember to adapt the paths and text to match your website's structure.