注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

jQuery 添加/删除类名和操作CSS样式  

2014-07-24 10:41:29|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

jQuery 添加/删除类名和操作CSS样式

【1】addClass添加类名和移除类名
     完成以下结构:

     <ul class='test'>
               <li><a href="">addClass-梦幻雪冰1</a></li>
               <li><a href="">removeClass-梦幻雪冰2</a></li>
               <li><a href="">addClass-梦幻雪冰3</a></li>
               <li><a href="">removeClass-梦幻雪冰4</a></li>
     </ul>

     完成以下样式:

<style>
          .test li,
          .test a {
               float: left;
          }
          .test li {
               margin-right: 5px;
          }
          .test a {
               padding: 10px 20px;
               background: #cfc;
               text-decoration: none;
          }
          .test .item{
               background: #333;
               color: #fff;
          }
     </style>

     思路:要完成导航栏的效果,首先要完成基本样式设置,然后再加鼠标移动到导航栏上显示选中某一个导航的效果。
     所以我们可以使用mouseover和mouseout事件;在这边我使用了hover事件,hover事件是当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

     $('.test li a').hover(
          function(){
               $(this).addClass('item');
          },
          function(){
               $(this).removeClass('item');
          }
     );

 欢迎来学习交流-----梦幻雪冰   

【2】toggleClass类名设置
     刚刚我们是用添加类名方法和移除类名方法完成了导航栏的效果,那有没有更简单的方法来实现?接下来我们来使用toggleClass来设置类名,来完成导航栏的效果

     $('.test a').hover(
          function(){
               $(this).toggleClass('item');
          },
          function(){
               $(this).toggleClass('item');
          }
     );

     或者用mouseover和mouseout事件配合toggleClass完成导航栏效果

     $('.test a').mouseover(function(){
          $(this).toggleClass('item');
     }).mouseout(function(){
          $(this).toggleClass('item');
     });


欢迎来学习交流-----梦幻雪冰
【3】css样式的设置
     前面是操作类名改变样式,那现在是来直接设置样式;在css方法中,可以获取标签样式也可以设置标签的样式
     以前在类里面怎么进行样式属性设置,在css也是一样的道理

     获取样式:

     $('.test a').mouseover(function(){
          console.log($(this).css('backgroundColor'));
     });
     $('.test a').hover(
          function(){
               $(this).css({
                    'background-color': '#333'
               })
          },
          function(){
               $(this).css({
                    'background-color': '#cfc'
               })
          }
     );


欢迎来学习交流-----梦幻雪冰
  评论这张
 
阅读(179)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017