JQuery实现通过点击标题切换字体

这个主要通过判断被点击的元素的子元素中是否包含了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(‘<b></b>‘);//包含在$author里面
    }
    else{
        var text = $author.text(); //纯文本
        $author.text(text);
    }
});
时间: 2024-08-29 12:53:03

JQuery实现通过点击标题切换字体的相关文章

jQuery实现点击单选按钮切换选中状态效果

实现效果:第一次点击单选按钮时选中该按钮,再次点击时取消选中该单选按钮. 关键就是要将单选按钮原来的值保存起来,第二次点击时.如果原来选中则取消,否则选中. 看代码吧,是用jQuery实现的,功能虽小.知识点不少啊..... Js代码   $(document).ready(function(){ var old = null; //用来保存原来的对象 $("input[name='sex']").each(function(){//循环绑定事件 if(this.checked){ o

jquery点击缩略图切换视频播放的视频切换焦点图效果

一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器,每个缩图对应一个视频片段,视频电影站推荐使用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

利用jquery写的一个TAB页切换效果

函数如下 [javascript] view plaincopy /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == no) { $(this).addClass(tab_c_css); }else { $(this).removeClass(tab_c_css); $(this).addClass(tab_n_css); } }) if (con) { $

jquery实现的点击可以展开折叠的垂直导航菜单

jquery实现的点击可以展开折叠的垂直导航菜单:本章节介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

Jquery实现详细与精简的切换(实现更多选项的功能)

上周学习了Javascript,只是学习了点皮毛而已.这周学习了Jquery.学习到了Jquery操作Dom节点.然后..然后学习到了隐藏和显示标签.于是想尝试能不能写的出京东商城的那个商品筛选功能. 那个筛选功能如图: 由于刚学习.所以技术不精.这里只实现以下两个功能 更多选项.点击切换收起选项. 点击条目在上面显示已点击条目. 首先是Html代码:这里主要的代码是: <div class="SubCategoryBox"> <div class="mt&

导航条点击按钮切换效果

<!--[if IE]><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><![endif]--><html xmlns="http://www.w3.org/1999/xhtml"><head>&

jQuery Mobile 连接外部连接或切换动画

jQuery Mobile不同网页之间的跳转问题 jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery:目前支持很多种手机设备,包括IOS/Android/BlackBerry/Windows Phone等,当然,支持程度不一,具体可以看:http://jquerymobile.com/gbs/ 由于这项目比较新,在我写这文章的时候,目前还是1.0 ALPHA4.1 RELEASED版,官网提供下载的只有jQuery Mobile的JS和CSS,相关文档目

JS框架_(jQuery.js)文章全屏动画切换

文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="

jQuery如何实现点击下拉菜单的隐藏和显示

jQuery如何实现点击下拉菜单的隐藏和显示:在众多的网站都有这样的效果,那就是点击一个父菜单就会显示下拉子菜单,再点击父菜单,那么子菜单就会隐藏,下面就简单介绍一下如何实现此中效果.这里只介绍如何使用jQuery实现此效果,暂且不考虑效果的美观度,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" co