这次给大家带来怎样做出点击标题文字切换字体效果,点击标题文字切换字体效果的注意事项有哪些,下面就是实战案例,一起来看一下。
这个主要通过判断被点击的元素的子元素中是否包含了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('');//包含在$author里面
}
else{
var text = $author.text(); //纯文本
$author.text(text);
}
});
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: