jQuery實(shí)現(xiàn)的點(diǎn)擊標(biāo)題文字切換字體效果示例【測(cè)試可用】

發(fā)布時(shí)間：2020-08-21 00:00:39 來(lái)源：腳本之家閱讀：138 作者：pfr 欄目：web開(kāi)發(fā)

本文實(shí)例講述了jQuery實(shí)現(xiàn)的點(diǎn)擊標(biāo)題文字切換字體效果。分享給大家供大家參考，具體如下：

這個(gè)主要通過(guò)判斷被點(diǎn)擊的元素的子元素中是否包含了b元素來(lái)進(jìn)行字體的切換，其中wrapInner函數(shù)是為了在$author元素的內(nèi)部添加b標(biāo)簽。

切換回正常字體是通過(guò)將內(nèi)容轉(zhuǎn)化為純文本形式，再替換元素內(nèi)容來(lái)實(shí)現(xiàn)的。

核心代碼如下：

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

完整代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net jQuery點(diǎn)擊標(biāo)題切換字體</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="f-author">這里顯示測(cè)試標(biāo)題文字</div>
<script>
$('#f-author').css('cursor','pointer');
$('#f-author').click(function(event){
  var $author = $(this);
  if(!$author.children().is('b')){//子元素沒(méi)有b
    $author.wrapInner('<b></b>');//包含在$author里面
  }
  else{
    var text = $author.text(); //純文本
    $author.text(text);
  }
});
</script>
</body>
</html>

運(yùn)行效果：

jQuery實(shí)現(xiàn)的點(diǎn)擊標(biāo)題文字切換字體效果示例【測(cè)試可用】

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

jQuery實(shí)現(xiàn)的點(diǎn)擊標(biāo)題文字切換字體效果示例【測(cè)試可用】

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽