0

我正在尝试为我的 Web 应用程序创建面包屑。

我的 .JSP 文件中有以下导航菜单：

<nav class="nav">
<ul class="wrap">

    <li class="menu-nav--home"><a href="/home" title="home"><span class="icon-home"></span></a></li>
        <ul>
            <li><a href="/business">Business</a></li>
            <li><a href="/search">Search</a></li>
            <li><a href="/details">Search Deatils</a></li>
            <li><a href="/update">Change Records</a></li>
            <li><a href="/delete">Remove</a></li>
            <li><a href="/order">Order Deatils</a></li>
            <li><a href="/checkout">Checkout</a></li>
        </ul>
    </li>
</ul>
</nav>

..我尝试使用 HTML5 微数据创建面包屑，如下所示：

 <div class="breadcrumb">
      <div class="wrap">
          <ol class="menu menu--hor">
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                  <a href="/home" itemprop="url">
                      <span itemprop="title">Home</span>
                  </a>
              </li>
              <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                  <a href="/business" itemprop="url">
                      <span itemprop="title">Business</span>
                  </a>
              </li>
              <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                  <a href="/search" itemprop="url">                      
                      <span itemprop="title">Search</span>
                  </a>
              </li>  
              <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                  <a href="/details" itemprop="url">
                      <span itemprop="title">Details</span>
                  </a>
              </li>
              <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                  <a href="/update" itemprop="url">
                      <span itemprop="title">Update</span>
                  </a>
              </li>
              <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                  <a href="/delete" itemprop="url">
                      <span itemprop="title">Delete</span>
                  </a>
              </li>  
              <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                  <a href="/order" itemprop="url">
                      <span itemprop="title">New Order</span>
                  </a>
              </li>
              <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                  <a href="/checkout" itemprop="url">
                      <span itemprop="title">Checkout</span>
                  </a>
              </li>
          </ol>
        </div>
    </div>

我的问题是，面包屑上的所有项目都在显示，什么时候，我只希望显示当前位置。

当前显示：

主页 业务 搜索 详情 更新 删除 新订单 结账

首选显示（例如，在结帐页面上时）

首页 > 结帐

任何帮助表示赞赏。

谢谢

更新 - 24/07/13

因此，经过一番谷歌搜索，很明显缺少一些 JS，这是第一次尝试。

    // Bread crumb script /////////////

var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
    path+="<A HREF=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+"</A> / ";
}
i=s.length-1;
path+="<A HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</A>";
var url = window.location.protocol + "//" + path;
document.writeln(url);

似乎确实可以检索当前页面/站点..但是，它没有将其放在我的导航菜单下方，而是放在似乎使我的站点崩溃的新页面中。

它是否需要某种形式的 .append 在新的 DIV 上？

4

0 回答 0