在我的网页标题中导航时需要帮助[重复]答案

【问题标题】：Need help in navigation in header my web page [duplicate]在我的网页标题中导航时需要帮助[重复]
【发布时间】：2017-09-18 15:44:44
【问题描述】：

我想让选定的链接在页面顶部可见，像这样，“主页 > page1 > link1> 文章 1”我如何使用 html php 或 jquery 进行此操作

【问题讨论】：

到目前为止你尝试过什么？请记住，StackOverflow 不是编码服务
对面包屑做一些研究。
感谢您的回复。它解决了我的问题。我想知道这个过程被称为“面包屑”的术语。再次感谢您

标签： javascript php jquery html

【解决方案1】：

我假设您使用了正确的 URL 层次结构进行导航

PHP 代码：

<?php

// This function will take $_SERVER['REQUEST_URI'] and build a breadcrumb based on the user's current path
function breadcrumbs($separator = ' &raquo; ', $home = 'Home') {
    // This gets the REQUEST_URI (/path/to/file.php), splits the string (using '/') into an array, and then filters out any empty values
    $path = array_filter(explode('/', parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)));

    // This will build our "base URL" ... Also accounts for HTTPS :)
    $base = ($_SERVER['HTTPS'] ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . '/';

    // Initialize a temporary array with our breadcrumbs. (starting with our home page, which I'm assuming will be the base URL)
    $breadcrumbs = Array("<a href=\"$base\">$home</a>");

    // Find out the index for the last value in our path array
    $last = end(array_keys($path));

    // Build the rest of the breadcrumbs
    foreach ($path AS $x => $crumb) {
        // Our "title" is the text that will be displayed (strip out .php and turn '_' into a space)
        $title = ucwords(str_replace(Array('.php', '_'), Array('', ' '), $crumb));

        // If we are not on the last index, then display an <a> tag
        if ($x != $last)
            $breadcrumbs[] = "<a href=\"$base$crumb\">$title</a>";
        // Otherwise, just display the title (minus)
        else
            $breadcrumbs[] = $title;
    }

    // Build our temporary array (pieces of bread) into one big string :)
    return implode($separator, $breadcrumbs);
}

?>

<p><?= breadcrumbs() ?></p>
<p><?= breadcrumbs(' > ') ?></p>
<p><?= breadcrumbs(' ^^ ', 'Index') ?></p>

在哪里定义一个函数，在你想显示的地方使用函数。

jQuery 代码：

var here = location.href.split('/').slice(3);

var parts = [{ "text": 'Home', "link": '/' }];
var breadcrumb = [];
for( var i = 0; i < here.length; i++ ) {
    var part = here[i];
    var text = part.toUpperCase();
    var link = '/' + here.slice( 0, i + 1 ).join('/');
    parts.push({ "text": text, "link": link });
}

通过parts数组创建html并添加到任何你想要的地方。

【讨论】：