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