單擊某一段文字改寫文本顏色
更新時間：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>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</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方法，若對應的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>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<script type="text/javascript">
$("p").click(function(){
$(this).toggleClass("red");
})
</script>
</body>
</html>
單擊某一段文字，改文字變?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>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</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方法，若對應的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>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<p>學如逆水行舟，不進則退</p>
<script type="text/javascript">
$("p").click(function(){
$(this).toggleClass("red");
})
</script>
</body>
</html>
相關(guān)文章
本篇文章主要介紹了JavaScript中捕獲/阻止捕獲、冒泡/阻止冒泡方法，具有一定的參考價值，有興趣的可以了解一下。2016-12-12
Bootstrap 下拉多選框插件Bootstrap Multiselect
這篇文章主要介紹了Bootstrap 下拉多選框插件Bootstrap Multiselect,引入文件及使用方法講解，需要的朋友參考下吧2017-01-01
ES6中的class是如何實現(xiàn)的(附Babel編譯的ES5代碼詳解)
這篇文章主要介紹了ES6中的class是如何實現(xiàn)的？(附Babel編譯的ES5代碼詳解)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
layui 圖片上傳+表單提交+ Spring MVC的實例
今天小編就為大家分享一篇layui 圖片上傳+表單提交+ Spring MVC的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
window.location.href是前端開發(fā)中一個非常重要且常用的屬性,它為我們提供了獲取和操作頁面URL的便捷手段,本文主要介紹了js中window.location.href的用法大全,感興趣的可以2023-12-12
JavaScript獲取GridView中用戶點擊控件的行號，列號
GridView中的某幾列有按鈕，需要獲取用戶當前點的按鈕的行號（捎帶的得到列號）2009-04-04
這篇文章主要介紹了JavaScript如何獲取數(shù)組最大值和最小值，需要的朋友可以參考下2015-11-11
JavaScript循環(huán)遍歷的24個方法,你都知道嗎
這篇文章主要給大家介紹了關(guān)于JavaScript循環(huán)遍歷的24個方法,文中對每種方法都給出了詳細的實例代碼,方便大家理解學習,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-09-09
對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解
今天小編就為大家分享一篇對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了基于JS判斷iframe是否加載成功的方法【多種瀏覽器】的相關(guān)資料,需要的朋友可以參考下2016-05-05