现在的位置: 网页制作教程网站制作教程 >正文
jquery相关教程

如何去掉最后一个li的分隔符

发表于2017/1/6 网站制作教程 0条评论 ⁄ 热度 2,009℃

我们在制作网站导航时,常常用分隔符将栏目隔开,但是我们会发现一个问题,在最后一个栏目li的右边会出现一个竖线间隔符。

我们一般是用ul li样式来布局导航栏目,用css在li的右侧增加border为1px的边框,这样就实现了在每个栏目之间有一个竖线的间隔符。但在最后一个栏目的右侧也就不可避免地出现了竖线,这样很不美观,我们用什么方法可以去掉最后一个li的分隔符呢?

导航条

我总结了两个方法可以去掉最后一个分隔符:引用jquery库实现,原生js代码实现。现在分别做介绍。

引入一个jquery库,例子如下:

<!DOCTYPE html>
<html>
<head>
  <title>去掉最后一个li样式</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  $(function(){
    $("#test li:last").css("border","none");//关键函数,注意容器id"#test"要和html代码中一样
})
  </script>
  <style type="text/css">
    ul, li { margin:0; padding:0; list-style:none; }
    #test { width:200px; }
    #test li { width:100%; height:24px; border-right:1px solid red; }
  </style>
</head><body>
<ul id="test">
  <li>菜单一</li>
  <li>菜单二</li>
  <li>菜单三</li>
</ul>
</body>
</html>

通过jquery的last方法可以获取最后一个li,进而定义css样式。

直接用原生js

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>去掉最后一个li样式</title>
  <script type="text/javascript">
  window.onload = function urlborder() {
    var listr = document.getElementById("test").getElementsByTagName('li');
    //注意容器id"test"要和html代码中一样
    for (var i = 0; i < listr.length; i++) {
      if (i == listr.length - 1) {
        listr[i].style.borderWidth = "0";
      }
    }
  }
</script>
<style type="text/css">
  ul,li{ margin:0; padding:0; list-style:none; }
  #test{ width:200px;}
  #test li{ width:100%; height:24px; border-right:1px solid red;}
  </style>
</head>
<body>
<ul id="test">
  <li>菜单一</li>
  <li>菜单二</li>
  <li>菜单三</li>
</ul>
</body>
</html>

先通过js获取到有多少个li,再利用for语句处理最后一个li的css。

  • 暂无评论