<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="new/js/jquery-3.2.1.min.js" type="text/javascript"></script> <!--以上script是导入的jquery文件--> <title>无标题文档</title> <!-- 此处样式可以看成是外部一个.css里面的内容，用法一样--> <style type="text/css"> .mainnav{ background:#292929; height:43px; margin-top:1px; margin-bottom:10px;} .mainnav ul{} .mainnav ul li{ float:left; display:inline; right no-repeat; padding-right:2px;} .mainnav ul li a{ display:inline-block; height:43px; line-height:43px; padding:0 23px; font-size:14px; color:#fff; font-weight:bold;} .mainnav ul li a:hover{ text-decoration:none; color:#e87717;} .mainnav ul li.on a{ color:#e87717;} </style> </head> <body> <div class="mainnav"> <ul> <li class="on"><a href="#">首页</a></li> <li><a href="#">主页</a></li> <li><a href="#">足球</a></li> <li><a href="#">篮球</a></li> <li><a href="#">台球</a></li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $('li').bind('click',function(){ $(this).addClass('on'); $('li').not($(this)).removeClass('on'); }); }); </script> </body> </html>