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