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

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 回答
0

我会让事情变得非常简单。首先为圆角定义两个 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");

查询：

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

如果你可以使用 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

样式表的 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/。两者中的最后一个是相当新的，但必须是好的。

于 2012-09-21T21:23:09.430 回答