jQuery實現的點擊標題文字切換字體效果示例【測試可用】

2019-11-19 13:56:56

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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);  }});

完整代碼如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>www.49028c.com jQuery點擊標題切換字體</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body><div id="f-author">這里顯示測試標題文字</div><script>$('#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);  }});</script></body></html>

運行效果：