<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script src="js/jquery.js"></script>
</head>
<body>
<button>11</button>
<button>22</button>
<button>33</button>
<button>44</button>
<script>
//javascript实现方法
// obtn = document.querySelectorAll('button');
// for(var i = 0; i < obtn.length; i++){
// obtn[i].onclick = function(){
// for(var j = 0; j < obtn.length; j++){
// obtn[j].style.color = "black";
// }
// this.style.color = "red";
// }
// }
//jquery实现方法
$('button').click(function() {
$(this).css("color", "red").siblings().css("color", "black");
});
</script>
<div>
<ul>
<li>
<a href="javascript:void(0);">11</a>
</li>
<li>
<a href="javascript:void(0);">22</a>
</li>
<li>
<a href="javascript:void(0);">33</a>
</li>
<li>
<a href="javascript:void(0);">44</a>
</li>
</ul>
</div>
<script>
$('div ul li>a').click(function(){
$(this).css({"text-decoration": "none", "color": "red"}).parent().siblings('li').children('a').css("color","black");
});
</script>
</body>
</html>