Question

我正在尝试为第一个和最后一个孩子创建一个带圆角的导航栏（使用无序列表）。我想使用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';

Answer 1

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'
});

Answer 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");

Jquery的：

   $('#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);

Answer 3

如果你可以使用jquery，你可以通过下一个方式来实现 intead“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>

Answer 4

样式表的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);

这假定id为“el”的元素是单击时触发整个事物的元素。

参见示例：http://jsfiddle.net/cgrFe/3/

你似乎对此知之甚少。一些可以帮助您入门的书籍：http://domscripting.com/book/和http://domenlightenment.com/。这两个中的最后一个是相当新的，但必须是好的。

在Javascript中动态地将边界半径分配给li first-child

4 个答案: