0

您好，我需要在 html 中创建类似面包屑的场景。我有一个页面有导航，如主页->部门->计算机->第1学期如果我在计算机页面上，那么它应该给面包屑作为

首页->>部门->>电脑

但我得到的概念是javascript：

function breadcrumbs(home,name){
    sURL = new String; 
    bits =  new Object;
    var x = 0;
    var stop = 0;
    var output = "<b><font color=\"darkgreen\">You are here:\<\/font\></b>                           <a href=\"http\:\/\/"+home+"\">Home</a> \<b\>→\<\/b\>  ";
    sURL = location.href;
    sURL = sURL.slice(8, sURL.length);
    chunkStart = sURL.indexOf("/");
    sURL = sURL.slice(chunkStart+1, sURL.length)
    while(!stop){
        chunkStart = sURL.indexOf("/");
        if (chunkStart != -1){
             bits[x] = sURL.slice(0, chunkStart)
             sURL = sURL.slice(chunkStart + 1, sURL.length);
        } else {
             stop = 1;
        }
        x++;
    }
    for(var i in bits){
        output += "<a href=\"";
        for(y= 1; y < x - i; y++){
              output += "../";
        }
        output += bits[i] + "/\">" + bits[i] + "</a>  \<b\>→\<\/b\>  ";
    }
    document.write(output + name);
}

Html文件是：

<html>
    <head> 
        <script language="JavaScript" src="crumb.js"></script> 
        <script language="JavaScript">
            <!--                 
            breadcrumbs('www.celtnet.org.uk/info/info.html','Current Page');
            -->
        </script>
    </head>
    <body>
    </body>
</html>

它的输出是：

You are here: Home >> Documents%20and%20Settings >> a >> Desktop >> Current Page

但我不需要页面名称我需要我点击的链接名称然后它应该被重定向到它分配的页面所以你能给我建议吗

4

1 回答 1

0

这是一个例子，我希望它符合您的需求。

面包屑.js

/**
 * Create the breadrumbs HTML.
 *
 * @param [Array] crumbs An array containing a list of crumbs the array must be
 *                       sorted according to their hierarchy.
 * @param [String] separator The string that will be used to separate each 
 *                           breadcrumb tag.
 * 
 * @return A string containing the HTML for the breadcrumb.
 */ 
function breadcrumbsHTML(url, separator) {
   var LINK_TEMPLATE = '<a href="{{href}}">{{crumb}}</a>';

   // Here we remove the protocol and obtain the crumbs.
   var crumbs = url.replace(/https?:\/\//g, '').split('/');
   var href= 'http://', html= '', crumb;

   for(var i in crumbs) {
      crumb = crumbs[i]; 

      // if it is the last crumb do not append the '/'
      href += crumb + (i === crumbs.length - 1 ? '' : '/');

      html += LINK_TEMPLATE
        .replace('{{crumb}}', crumb)
        .replace('{{href}}', href);

      if (i < crumbs.length - 1)  
          html += separator;
   }   

   return html;
}

var URL = 'http://stackoverflow.com/questions/14382848/create-scenario-like-breadcrumb';

console.log(breadcrumbsHTML(URL, ' >> '));

你可以像这样使用它：

<html>
    <head> 
        <script language="JavaScript" src="crumb.js"></script> 
        <script language="JavaScript">
            <!--                 
            document.getElementById('breadcrumbs').innerHTML = breadcrumbsHTML(location.href, ' >> ');
            -->
        </script>
    </head>
    <body>
        <div id="breadcrumbs"></div>
    </body>

正如您可能注意到的那样，我已经从面包屑链接标签中删除了样式，应该使用针对#breadcrumbsdiv 标签内元素的 CSS 规则来应用样式。

于 2013-01-17T16:50:54.267 回答