0

最初と最後の子の角が丸いナビゲーション バーを作成しようとしています (順序付けされていないリストを使用)。onclick JavaScript 関数を使用して、JavaScript 内で角丸を動的に割り当てたいと考えています。これが私が試した私のコードです。誰かが私に理由を教えてください、および/または解決策やリソースを提案してもらえますか? よろしくお願いします。

HTML:

                   <nav>
                        <ul id="navBar">
                            <li><a href="#" title="View"><div class="menu" onClick="select(this)">View</div></a></li>
                            <li><a href="#" title="Duplicate"><div class="menu" onClick="select(this)">Duplicate</div></a></li>
                            <li><a href="#" title="Edit"><div class="menu" onClick="select(this)">Edit</div></a></li>
                            <li><a href="#" title="Delete"><div class="menu" onClick="select(this)">Delete</div></a></li>
                    </ul>
                  </nav>

Javascript:

  document.getElementById('ul#navBar li:first-child').style.MozBorderRadiusTopleft = '13px';
document.getElementById('ul#navBar li:first-child').style.MozBorderRadiusBottomleft = '13px';
document.getElementById('ul#navBar li:last-child').style.MozBorderRadiusTopRight = '13px';
document.getElementById('ul#navBar li:last-child').style.MozBorderRadiusBottomRight = '13px';
4

4 に答える 4

0

jqueryを使用できる場合は、「border」、「3px double red」の代わりに次の方法で実行できます。スタイルを使用する必要があります

<script type="text/javascript" language="javascript">
         var Menu = {
            rootEl: null,

            Init: function (idRootEl) {
                this.rootEl = $(idRootEl);
                this.initItems();
                this.setFirstElSeleceted();
            },
            setFirstElSeleceted: function () {
                $($(this.rootEl).find('li')[0]).css("border", "3px double red");
            },
            initItems: function () {
                var self = this;


                $(self.rootEl).find('li').each(function (indx) {
                    $(this).click(function () {
                        self.removeSelection();
                        self.setSelected(this);
                    });

                });
            },
            setSelected: function (el) {
                $(el).css("border", "3px double red");
            },
            removeSelection: function () {
                var self = this;
                $(self.rootEl).find('li').each(function (el) {
                    $(this).css("border", "");
                });
            }
        };




        $(function() {
            Menu.Init('ul#navBar');
         });
        </script>
于 2012-09-21T21:21:56.623 に答える
0

私は物事を本当にシンプルにします。角を丸くするための 2 つの CSS クラスを定義することから始めます。

 .round-top {
      MozBorderRadiusTopleft:13px;
      MozBorderRadiusTopRight:13px;

  }

  .round-bottom {
      MozBorderRadiusBottomleft:13px;
      MozBorderRadiusBottomRight:13px;
   }

次に、関心のある要素からクラスを追加/削除するだけです。javascript の場合:

   var container = document.getElementById(navBar);
   container.firstChild.setAttribute("class", "round-top");
   container.lastChild.serAttribute("class", "round-bottom");

Jクエリ:

   $('#navBar li:first-child').addClass('round-top');
   $('#navBar li:last-child').addClass('round-bottom');

完全なイベント リスナーは次のようになります。

 function addBorders(){
     var container = document.getElementById(navBar);
     container.firstChild.setAttribute("class", "round-top");
     container.lastChild.serAttribute("class", "round-bottom");
 }

 //target is the element you want to trigger the event
 target.addEventListener("click", addBorders, false);
于 2012-09-21T21:10:18.780 に答える
0

スタイルシートの CSS:

.is-rounded li:first-child {
    -moz-border-radius: 13px 0 0 13px;
    -webkit-border-radius: 13px 0 0 13px;
    border-radius: 13px 0 0 13px;
}

.is-rounded li:last-child {
    -moz-border-radius: 0 13px 13px 0;
    -webkit-border-radius: 0 13px 13px 0;
    border-radius: 0 13px 13px 0;
}

Javascript:

function makeRounded(e) {
   document.querySelector('#navBar').className += 'is-rounded';
}

document.querySelector('#el').addEventListener('click', makeRounded, false);

これは、「el」の id を持つ要素が、クリックされたときにすべてをトリガーする要素であると想定しています。

例を参照してください: http://jsfiddle.net/cgrFe/3/

あなたはこれについてほとんど知らないようです。始めるための数冊の本: http://domscripting.com/book/およびhttp://domenlightenment.com/。2 つのうちの最後のものはかなり新しいものですが、優れたものに違いありません。

于 2012-09-21T21:23:09.430 に答える
0

getElementById引数としてセレクターを取りません。その使用には、要素の有効な ID のみが必要です。あなたはおそらくjQueryについて考えているでしょう:

$('ul#navBar li:first-child').css({
    MozBorderRadiusTopleft: '13px'
});

$('navBar li:first-child').css({
    MozBorderRadiusBottomleft: '13px'
});

$('ul#navBar li:last-child').css({
    MozBorderRadiusTopRight: '13px'
});

$('navBar li:last-child').css({
    MozBorderRadiusBottomRight: '13px'
});
于 2012-09-21T20:58:32.183 に答える