css样式：
.tgmenu{width:950px; height:33px; background:#9D291C; border-top:2px solid #DC442F; margin:0 auto; line-height:34px; padding-left:30px} .tgmenu a{ font-size:14px; text-decoration:none; font-weight:bold;loat:left; color:#FFF} .tgmenu .Mcurrent{background:url(../images/tg_sprite.gif) repeat-x;color:#CC3333;border-left:2px solid #DC442F;height:33px;float:left; text-align:center; padding:0 20px} .tgmenu .Mlink{border-left:2px solid #DC442F;height:33px;float:left; text-align:center; padding:0 20px}html代码：
<div class="tgmenu" id="menu"> <a><span id="span1" class="Mcurrent" onclick="MenuClick(this.id,'GroupBuyNow.aspx')">今日团购</span></a> <a><span id="span2" class="Mlink" onclick="MenuClick(this.id,'GroupBuyPast.aspx')">往期团购</span></a> </div>
jQuery:
function MenuClick(id,str) { $("#menu span").each(function () { $(this).attr("class", "Mlink"); }); $("#" + id).attr("class", "Mcurrent"); }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> ul,li{padding:0;margin:0;list-style:none} #menu li{width:100px;background:#EEE;margin-right:1px;display:block;float:left;height:24px;line-height:24px;vertical-align:middle;text-align:center} #menu li:first-child{background:#CCC;} </style> <script> function MenuClick(obj){ var tag = document.getElementsByTagName("li") for (var i=0;i <tag.length;i++ ) { tag[i].style.background="#EEE" ; obj.style.background = "#ccc" ; } } </script> </head> <body> <ul id="menu"> <li onclick="MenuClick(this)">首页 </li> <li onclick="MenuClick(this)">页面1 </li> <li onclick="MenuClick(this)">页面2 </li> <li onclick="MenuClick(this)">页面3 </li> <ul> </body> </html>
随时随地看视频
