jQuery之修改li下样式和图片

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

      /* 将所有li样式替换为cz(默认样式) */
      $(‘li‘).removeClass(‘selected-cz‘);
      $(‘li‘).addClass(‘cz‘);

      /* 将选中的li样式更改为selected-cz */
      $(this).removeClass(‘cz‘);
      $(this).addClass(‘selected-cz‘);

      /* 将所有图片替换为默认图片 */
      var allImg = $("li img");
      for ( var i = 0; i < allImg.size(); i++) {
        if (i % 2 == 0) {
          $(allImg[i]).attr("src", "${ctxStatic}/modules/fstore/images/chongzhi_qqq.png");//改变img的src
        } else {

          $(allImg[i]).attr("src", "${ctxStatic}/modules/fstore/images/chongzhi_jf.png");
        }
      }
      //当前li中的img
      var imgs = $("img", this);
      for ( var i = 0; i < imgs.size(); i++) {
        if (i == 0) {
          $(imgs[i]).attr("src", "${ctxStatic}/modules/fstore/images/chongzhi_qq.png");
        } else {

          $(imgs[i]).attr("src", "${ctxStatic}/modules/fstore/images/chongzhi_jfz.png");
        }
      }
    });
  });

</script>

原文地址:https://www.cnblogs.com/kittycat/p/9203013.html

时间: 2024-08-29 18:13:16

jQuery之修改li下样式和图片的相关文章

jQuery修改li下的样式,以及修改li下的img的src的值

$(".test li").click(function() { $(".test li a").removeClass("test01"); $(".test li a").addClass("test02"); $("a", this).removeClass("test02");//当前li中的a标签 $("a", this).addClas

jquery选择div下的ul下的li下的a

使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").children("ul:first").children("li:first").find("a");//div下的第一个ul下的第一个li下的a标签 //可以用下标 $("div#div的id").children("u

jquery li a 样式

jQuery(".CwebtopNavContainer").find("li:last a").css("color","red"); jQuery(document).ready(function () {           var MyDate=new Date();                jQuery("#gsggDiv li").each(function(){            

自制jquery可编辑的下拉框

昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

炫酷实用的jQuery插件 涵盖菜单、按钮、图片

新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效,一起来看看吧. 1.CSS3书本翻页动画 书本翻页效果逼真 今天我们要分享一款炫酷而且实用的CSS3动画效果,它是模拟书本翻页的动画特效.当鼠标滑过书本右上角时,书本即可向前翻一页,而且翻页动画非常逼真.由于CSS3的运用,我们并不需要使用复杂的图片来制造逼真的书本效果,书本翻页可以很简单地完成.之

jQuery制作水平多级下拉菜单

本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#">主页</a></li> <li><a href="#">产品</a></li>

ie6下:png图片不透明 和 背景图片为png的节点的内部标签单击事件不响应

1.png图片不透明 少量图片时:使用滤镜: _background:none; _filter:prodig:DXImageTransform.Microsoft.AlphaImageLoader(src="../a.png"); 注意: 测试发现如果把样式写在css文件里,而非当前页面的<style></style>里,则不会生效. 图片多时:使用js插件,可参考ie6里png图片不透明 2.背景图片为png的节点的内部标签单击事件不响应 参考张鑫旭的Jav

jquery删除指定li元素简单介绍

jquery删除指定li元素简单介绍:本章节介绍一下如何利用jquery删除指定的li元素,虽然比较简单,但这也是比较常见的操作,可能很多初学者还是不够了解,下面就通过代码实例介绍一下如何实现此功能,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.sof