0

私は、英語版とアラビア語版を使用した ul li メニュー im を持っています。アラビア語版でメニューを逆順にする必要がある場合、どうすれば私のコードが

 <ul id="menu">
        <li><a href="../Default.aspx">
            <img src="../images/logoheader.png" height="24px" alt="Home" /></a></li>
        <li><a href="../Lgs.aspx?confirm=1">
            <%=Resources.Fields.lgs%></a> </li>
        <li><a href="../CustomPage.aspx?Pid=2">
            <%=Resources.Fields.aboutus%></a> </li>
        <li><a href="../Login.aspx?confirm=1">
            <%=Resources.Fields.login%>
        </a><a href="../Signup.aspx?confirm=1">
            <%=Resources.Fields.register%></a> </li>
            <li><a href="#">
                <%=Resources.Fields.more_new%></a></li>
    </ul>

これは次のように表示され
ます ラグ | 私たちについて | ログイン | サインアップ | もっと

JavaScriptでこのように逆にしたい

詳細 | サインアップ | ログイン | 会社概要 | ラグ | 家

4

2 に答える 2

2

liサーバー側で適切な順序で要素を出力することをお勧めします。

ただし、クライアント側で処理したい場合: IE7 以前をサポートする必要がない限り、JavaScript は必要ありません。

いくつかのクライアント側オプション:

  1. HTMLdir属性(IE7 以前では機能せず、IE8 以降では機能します)

  2. CSS direction: rtl (IE7 以前では動作せず、IE8 以降では動作します)

  3. JavaScript (IE6でも動きます)

1. HTMLdir属性

dir次の属性を使用できますul。

<ul id="menu" dir="RTL">

li要素がの場合、inline-blockそれらの順序が逆になります。

実例| ソース

ページが表示される前に、その属性をサーバー側で適用することをお勧めしますが、JavaScript で行う必要がある場合は、次のようにします。

document.getElementById("menu").dir = "RTL";

実例| ソース

2.CSS

CSS を適用して行うこともできます。

#menu {
  direction: rtl;
}

実例| ソース

3.JavaScript

insertBeforeしかし、JavaScript の解決策は、リスト項目を 2 番目の項目から順に見ていき、 DOM メソッドを使用してそれぞれを一番上に移動することです。順序が逆になってしまいます。次のようになります。

var list = document.getElementById("menu");
var child, sibling;

if (list.childNodes.length > 1) {
  for (child = list.firstChild.nextSibling; child; child = sibling) {
    sibling = child.nextSibling;
    list.insertBefore(child, list.firstChild);
  }
}

実例| ソース

上記のすべては要素の順序を調整しますが、li要素内のテキストの方向は調整しません。他の場所で処理していると思います。そうでない場合は、LTR ではなく RTL にしたい要素にこの CSS を適用してください。

relevant_selector {
  direction:rtl;
  unicode-bidi:bidi-override;
}
于 2012-12-15T08:50:30.157 に答える
1

jqueryを追加し、本文で次を使用する必要があります

 ul = $('#menu'); // your parent ul element
ul.children().each(function(i,li){ul.prepend(li)});
于 2012-12-15T08:42:47.067 に答える