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

 更新时间:2014年11月02日 15:13:26   投稿:whsnow  
这篇文章主要为大家介绍了jQuery如何修改li下的样式,以及修改li下的img的src的值,示例代码很简单,一看就会

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).addClass("test01");
var title_index = $(this).index();//当前li的index
//li中所有的img
var allImg = $(".test li img");
for ( var i = 0; i < allImg.size(); i++) {
if (i % 2 == 0) {
$(allImg[i]).attr("src", "images/b04.gif");//改变img的src
} else {

$(allImg[i]).attr("src", "images/b05.gif");
}
}
//当前li中的img
var imgs = $("img", this);
for ( var i = 0; i < imgs.size(); i++) {
if (i == 0) {
$(imgs[i]).attr("src", "images/b01.gif");
} else {

$(imgs[i]).attr("src", "images/b02.gif");
}

}
if (title_index == 0) {
$("#a).hide();
$("#b").show();
} else {
$("#b").hide();
$("#a").show();
} 
})

相关文章

  • 基于jQuery实现仿百度首页选项卡切换效果

    基于jQuery实现仿百度首页选项卡切换效果

    这篇文章主要介绍了基于jQuery实现仿百度首页选项卡切换效果的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • jquery阻止冒泡事件使用模拟事件

    jquery阻止冒泡事件使用模拟事件

    当点击span的时候div和body的事件全部触发了。要阻止这种发生并使用模拟事件。具体实现如下,感兴趣的朋友可以参考下
    2013-09-09
  • 利用jQuery实现可以编辑的表格

    利用jQuery实现可以编辑的表格

    在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容
    2014-05-05
  • 基于JQuery和DWR实现异步数据传递

    基于JQuery和DWR实现异步数据传递

    这篇文章主要介绍了基于JQuery和DWR实现异步数据传递,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 利用jquery和BootStrap实现动态滚动条效果

    利用jquery和BootStrap实现动态滚动条效果

    这篇文章主要介绍了利用jquery和BootStrap实现动态滚动条效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • jQuery实现瀑布流布局详解(PC和移动端)

    jQuery实现瀑布流布局详解(PC和移动端)

    这篇文章非常全面的介绍了在PC和移动端上jQuery实现瀑布流布局的详细过程,文中示例代码介绍的非常详细,具有一定的参考价值,对瀑布流布局感兴趣的小伙伴们可以参考一下
    2015-10-10
  • jQuery autocomplate 自扩展插件、自动完成示例代码

    jQuery autocomplate 自扩展插件、自动完成示例代码

    jquery-lib版本是 1.3.2的,该插件是简单的扩展插件,代码也比较简单的封装。所以看起来也比较简单不是很费力,当然封装得也不是很好。
    2011-03-03
  • jquery实现淘宝商品图片局部放大

    jquery实现淘宝商品图片局部放大

    这篇文章主要为大家详细介绍了jquery实现淘宝商品图片局部放大,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • jQuery实现Twitter的自动文字补齐特效

    jQuery实现Twitter的自动文字补齐特效

    本文介绍了一款jQuery实现的文字自动补全特效的插件,该插件可以结合本地数据进行一些操作。推荐关注一下H5的几种数据存储的方式(localstorage与sessionstorage、IndexedDB、离线缓存manifest文件)
    2014-11-11
  • jQuery实现简单漂亮的Nav导航菜单效果

    jQuery实现简单漂亮的Nav导航菜单效果

    这篇文章主要介绍了jQuery实现简单漂亮的Nav导航菜单效果,涉及jQuery响应鼠标事件动态遍历与操作页面元素属性的相关实现技巧,需要的朋友可以参考下
    2017-03-03

最新评论