六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

jquery批量设置同类元素的背景

Admin | 2015-9-1 10:28:19 | ReadNums | 1391 | 标签 网页制作 | 打印本页
     

  使用jquery可以一次性就设置同类元素的属性,下面我们看这个方法。

  假设页面的HTML元素为如下的对象:

  <div id="menu">
     <ul>
       <li><a href="#" class="first">首页</a></li>
       <li class="current_page_item"><a href="#">博客</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
  </div>

  其中,最为关键的就是<div id="menu">这个了,它有ID号,其它的不需要有。另外,我们要设置的就是这个div里面的所有li对象的属性为:鼠标移动到li上,其背景会改变颜色;鼠标移出之后,又恢复原来的背景颜色,这个如何做呢?

  请看下面的jquery代码即可。

  <script type="text/javascript"> 
  $(document).ready(function(){

    $("#menu li").on("mouseover",function(){
      $(this).css({"color":"#618C04"});
      $(this).css({"background-color":"#FFFFFF"});
    })
 
    $("#menu li").on("mouseout",function(){
      $(this).css({"color":""});
      $(this).css({"background-color":""});
    })
 
  });
  </script>

  其中的$("#menu li")代表的是ID号为menu的对象里面是所有li元素。


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日