<!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>

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

纯CSS气泡框实现方法探究讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。