问题创建/显示HTML5面包屑

时间:2013-07-24 10:46:50

标签: javascript jquery html html5 navigation

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

我的.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 Microdata创建一个面包屑,如下所示:

 <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>

我的问题是,正在显示痕迹导轨上的所有项目,何时,我只想显示当前位置。

当前显示:

首页商户搜索详情更新删除新订单结帐

首选显示(例如,在结帐页面上)

主页&gt;结帐

感谢任何帮助。

由于

更新 - 2013年7月24日

所以,经过一段谷歌搜索,显然有些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);   

它似乎检索当前页面/网站..但是,不会将它放在我的导航菜单下面,而是放在一个似乎使我的网站崩溃的新页面中。

是否需要在新DIV上使用某种形式的.append?

0 个答案:

没有答案