本文實例講述了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.jb51.net 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>
運行效果：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery動畫與特效用法總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
