我们在制作网站导航时，常常用分隔符将栏目隔开，但是我们会发现一个问题，在最后一个栏目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。
声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/503.html
