單擊某一段文字改寫文本顏色
更新時間：2014年06月06日 09:20:06 作者：
單擊某一段文字，改文字變?yōu)榧t色，再次單擊之后，文字又變回黑色，示例如下,需要的朋友可以參考下
說明：
單擊某一段文字，改文字變?yōu)榧t色，再次單擊之后，文字又變回黑色。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.red
{
color:red;
}
</style>
</head>
<body>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<script type="text/javascript">
$("p").click(function(){
if($(this).hasClass("red")){ //判斷是否具有該class
$(this).removeClass("red");
}else{
$(this).addClass("red");
}
})
</script>
</body>
</html>
因為這是一個class交替變化的過程，所以可以使用toggleClass方法，若對應(yīng)的class："red"存在的話，則移除之，如果不存在，則添加之
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.red
{
color:red;
}
</style>
</head>
<body>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<script type="text/javascript">
$("p").click(function(){
$(this).toggleClass("red");
})
</script>
</body>
</html>
單擊某一段文字，改文字變?yōu)榧t色，再次單擊之后，文字又變回黑色。
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.red
{
color:red;
}
</style>
</head>
<body>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<script type="text/javascript">
$("p").click(function(){
if($(this).hasClass("red")){ //判斷是否具有該class
$(this).removeClass("red");
}else{
$(this).addClass("red");
}
})
</script>
</body>
</html>
因為這是一個class交替變化的過程，所以可以使用toggleClass方法，若對應(yīng)的class："red"存在的話，則移除之，如果不存在，則添加之
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.red
{
color:red;
}
</style>
</head>
<body>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<p>學(xué)如逆水行舟，不進則退</p>
<script type="text/javascript">
$("p").click(function(){
$(this).toggleClass("red");
})
</script>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了canvas實現(xiàn)手機端用來上傳用戶頭像的代碼代碼簡單易懂非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-10-10
JavaScript循環(huán)遍歷的24個方法,你都知道嗎
這篇文章主要給大家介紹了關(guān)于JavaScript循環(huán)遍歷的24個方法,文中對每種方法都給出了詳細(xì)的實例代碼,方便大家理解學(xué)習(xí),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了js實現(xiàn)2015年新年倒計時效果，很快就要迎接新的一年，想知道距離2016還有多少天嗎？大家可以參考一下這篇文章2015-12-12
2008-01-01
通過JS的事件循環(huán)機制,可以更清楚JS代碼的執(zhí)行流,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章讓你搞清楚JavaScript事件循環(huán)的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了在webpack打包后直接訪問頁面圖片路徑錯誤的解決方法，文中介紹的非常詳細(xì)，對遇到這個問題的朋友們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
JavaScript 事件屬性綁定帶參數(shù)的函數(shù)
在JavaScript中，為了實現(xiàn)表現(xiàn)和控制相分離，可以通過0級的DOM事件屬性或者2級的事件模型來實現(xiàn)，不過這兩者在針對某個事件類型調(diào)用相應(yīng)的事件句柄的時候，不能給事件句柄提供參數(shù)，也就是說，事件屬性的值只能是一個函數(shù)引用。2009-03-03
最近正在做的一個小程序項目中需要用到一個可清除的輸入框控件，為了方便小編直接使用了可清除的input自定義組件，下面腳本之家小編給大家?guī)砹宋⑿判〕绦蜃远x組件之可清除的input組件，感興趣的朋友一起看看吧2018-07-07
使用百度地圖api實現(xiàn)根據(jù)地址查詢經(jīng)緯度
這篇文章主要介紹了使用百度地圖api實現(xiàn)根據(jù)地址查詢經(jīng)緯度的方法，附上實例，推薦給有需要的小伙伴們。2014-12-12
下面小編就為大家?guī)硪黄憫?yīng)式表格之固定表頭的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08