首页 > 代码库 > 控制导航条最后一个标签样式的三种方法
控制导航条最后一个标签样式的三种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>控制导航条最后一个标签样式的三种方法</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<style>
.nav{width: 1200px; height: auto; overflow: hidden; background-color: cornflowerblue; margin: 0 auto;}
.nav a{ width: 19.8%; line-height: 50px; float: left; color: #fff; text-align: center; border-right:2px solid #fff ;}
/*.last{ border-right: none !important;}*/
</style>
</head>
<body>
<!--
方法一：将样式直接写在最后一个标签内，行内或行外。
方法二：用jquery方法获取最后一个标签并且改变其样式。
方法三：用js方法获取最后一个标签并赋予其样式。
-->
<div class="nav" id="nav">
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="" class="last">导航 end</a>
</div>
<script type="text/javascript">
/*jquery 控制控制最后一个标签的方法
$(function(){
$(".nav a").last().css("border-right","none");
});
*/
/*js 控制控制最后一个标签的方法*/
var getnav = document.getElementById(‘nav‘).getElementsByTagName(‘a‘);
//alert(getnav.length);
getnav[getnav.length -1].style.borderRight = "none";
</script>
</body>
</html>
控制导航条最后一个标签样式的三种方法