jQuery--改變導航背景色

時間 2021-08-14

標籤 css html ide this url spa .net xml htm 欄目 JQuery 简体版

原文原文鏈接

css樣式：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(../p_w_picpaths/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代碼：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:ide

  
  
           
  
  
   
   
            
   
   function MenuClick(id,str) {  
   
   
            
   
               $("#menu span").each(function () { 
   
   
            
   
                   $(this).attr("class", "Mlink"); 
   
   
            
   
               }); 
   
   
            
   
               $("#" + id).attr("class", "Mcurrent"); 
   
   
            
   
           }

另外一種方法：this

來自：http://topic.csdn.net/u/20101124/16/f6fd651e-0dde-4dc0-b52d-45d04b0428b7.htmlurl

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