-1

ブレッドクラム ナビゲーション メニューを右から左に表示するにはどうすればよいですか?

例えば：

document.title «マイページ«ホーム

左から右に表示する以下のスクリプトを使用していますが、正しく操作する方法がわかりません。

<script language="JavaScript">
<!-- 
  function breadcrumbs(){
    sURL = new String;
    bits = new Object;
    var x = 0;
    var stop = 0;
    var output = "<div class=topnav><A HREF=/>Hyperdisc</A> &raquo; ";

    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> &raquo; ";
    }
    document.write(output + document.title);
    document.write("</div>");
  }
 // -->
</script>

どちらが表示されますか:

ホーム» myPage » document.title

4

1 に答える 1

2

これにはJSは必要ありません。必要なのはdirectionCSS プロパティです。これがテストケースhttp://jsbin.com/welcome/55152/editです。方向性のサポートが良い

主なポイントは次のとおりです。

ul {
  direction: rtl;
}
li { display: inline; }
a { display: inline-block; }

更新これに絶対に JS を使用する必要がある場合は、簡単なスニペットを次に示します。

var list = document.getElementById('nav'),
    lis = document.querySelectorAll('li'),
    l = lis.length - 1,
    i,
    newList = document.createElement('ul');

for(i = l; i >= 0; i--) {
  newList.appendChild(lis[i]);
}
list.parentNode.replaceChild(newList, list);

スニペットは、次のようなマークアップを想定しています。

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">myPage</a></li>
  <li>Document</li>
</ul>

テストケースはこちら – http://jsbin.com/welcome/55163/edit

実際のスニペットの更新

質問の実際のコードに関しては、最後の for() ループを含むすべてを次のスニペットに置き換えることができます。

document.write(output + document.title);
for(var i = bits.length - 1; i >= 0; i--){
  output += "&laquo; <A HREF=\"";
  for(y=1;y<x-i;y++){
    output += "../";
  }
  output += bits[i] + "/\">" + bits[i] + "</A>";
}
document.write("</div>");
于 2012-11-29T21:14:36.867 に答える