Question

您好，我需要在html中创建像痕迹一样的场景。我有一个页面，有导航如 home - ＆gt;部门 - ＆gt;电脑 - ＆gt;第一学期如果我在计算机页面上，那么它应该提供面包屑

主页 - ＆GT;＆GT;＆部 - GT;＆GT;计算机

但我得到的概念是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

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

Answer 1

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

<强> crumb.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>

您可能已经注意到我已从痕迹导航链接标记中删除了样式，因此应使用针对#breadcrumbs div标记内的元素的CSS规则来应用样式。

创建像痕迹一样的场景

1 个答案: