怎样做出点击标题文字切换字体效果

这次给大家带来怎样做出点击标题文字切换字体效果,点击标题文字切换字体效果的注意事项有哪些,下面就是实战案例,一起来看一下。

这个主要通过判断被点击的元素的子元素中是否包含了b元素来进行字体的切换,其中wrapInner函数是为了在$author元素的内部添加b标签。

切换回正常字体是通过将内容转化为纯文本形式,再替换元素内容来实现的。

核心代码如下:

$('#f-author').css('cursor','pointer');$('#f-author').click(function(event){  var $author = $(this);  if(!$author.children().is('b')){//子元素没有b    $author.wrapInner('');//包含在$author里面  }  else{    var text = $author.text(); //纯文本    $author.text(text);  }});

登录后复制

完整代码如下:

www.jb51.net jQuery点击标题切换字体

这里显示测试标题文字

$('#f-author').css('cursor','pointer');$('#f-author').click(function(event){ var $author = $(this); if(!$author.children().is('b')){//子元素没有b $author.wrapInner('<b></b>');//包含在$author里面 } else{ var text = $author.text(); //纯文本 $author.text(text); }});

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

配置打包文件路径出错怎样解决

r.js怎样操作css文件

以上就是怎样做出点击标题文字切换字体效果的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2749797.html

(0)
上一篇 2025年3月8日 05:26:14
下一篇 2025年3月2日 15:43:55

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在微信小程序中如何实现修改view标签背景颜色

    这篇文章主要介绍了微信小程序实现点击按钮修改view标签背景颜色功能,涉及微信小程序事件响应及数值运算实现动态设置view背景色样式的相关操作技巧,需要的朋友可以参考下 本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能。分享…

    编程技术 2025年3月8日
    200
  • 一起看看JavaScript如何获取页面上被选中的文字

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法。最关键的JavaScript API是: event.selection = window.getSelection(); 登录后复制 这里的selection实…

    2025年3月7日
    200
  • react怎么避免重复点击

    防止重复点击的思路: 在请求数据一旦开始,直到本次请求结束之前,不能进行下一次点击,否则给与相应的提示。 具体方法: state中的初始设置: state={   bool:true,} 登录后复制 点击事件设置: btn_click = …

    2025年3月7日
    200
  • 使用jQuery绑定点击事件的示例教程

    jQuery点击事件绑定实例教程 在网页开发中,点击事件是最常用的交互方式之一。通过jQuery,我们可以很方便地为页面元素绑定点击事件,实现各种交互效果。本文将为大家介绍如何使用jQuery来绑定点击事件,并提供具体的代码示例。 1. 引…

    2025年3月7日
    200
  • 如何使用jQuery为按钮绑定点击事件?

    标题:如何使用jQuery为按钮绑定点击事件? 在Web开发中,为页面元素添加交互功能是至关重要的。其中,绑定点击事件是一种常见的操作,可以实现按钮点击后触发特定的功能。而在jQuery中,为按钮绑定点击事件也是一件非常简单且常见的操作。接…

    2025年3月7日
    200
  • 如何使用jQuery获取点击元素在集合中的索引

    如何使用jQuery获取点击元素在集合中的索引 在web开发中,经常会遇到需要获取点击元素在集合中的索引的情况。这时候,我们可以借助jQuery这个强大的JavaScript库来实现这个功能。下面将介绍如何使用jQuery获取点击元素在集合…

    2025年3月7日
    200
  • 点击元素时获取其在页面中的位置 – 使用jQuery

    使用jQuery实现点击事件获取当前元素的索引 jQuery是一个轻量级、快速且功能丰富的JavaScript库,广泛用于网页开发中。在实际项目中,经常需要通过点击事件获取当前元素的索引,以便进行相应的操作。下面将通过具体的代码示例演示如何…

    2025年3月7日
    200
  • WPS文字中分页符强大的功效

    您有一份精心排版的五页文档,需要在第二页后添加一个空白页。只需在第三页顶部插入一个分页符,文档中从第三页开始的所有内容都会自动向后移动一页,从而轻松创建新的空白页。 更便捷的是,您可以使用快捷键:Ctrl+M 将当前页及后续所有内容向下移动…

    2025年3月7日
    200
  • WPS文字中编号使用全攻略

    一、批量编号操作指南: 方法一:手动设置编号 录入文本内容。文本末尾按回车键换行。全选文本。点击“项目符号与编号”功能,在设置框中选择所需编号样式。点击“确定”。 方法二:快速编号 输入文本内容。全选文本。直接点击快捷菜单中的“编号”按钮,…

    2025年3月7日
    200
  • 华为纯净模式怎么关闭?_华为纯净模式关闭教程

    想关闭华为手机的纯净模式?请按照以下步骤操作: 第一步:打开手机的“设置”应用(通常是一个齿轮状图标)。 第二步:找到并点击“系统与更新”选项(通常位于设置页面中部或下部)。 第三步:找到“纯净模式”并点击进入(通常位于页面中部或上部)。 …

    2025年3月7日
    200

发表回复

登录后才能评论