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 に答える