jQuery toggleClass應(yīng)用實(shí)例(附效果圖)
更新時(shí)間：2014年04月06日 16:53:51 作者：
這篇文章主要介紹了jQuery toggleClass的應(yīng)用,需要的朋友可以參考下
1、首先到j(luò)Query官網(wǎng)下載js庫(kù)，網(wǎng)址為http://jquery.com/
2、建立一個(gè)jQuery示例的項(xiàng)目。
3、將js庫(kù)放到j(luò)Query示例的項(xiàng)目中。
4、寫一個(gè)html頁(yè)面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="author" content="Kong.Yee"/>
<meta http-equiv="corporation" content="廣州匡興軟件科技有限公司"/>
<meta http-equiv="contact" content="791663094或kong.yee@foxmail.com"/>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.10.2.js"></script>
<title>Insert title here</title>
<style type="text/css">
.bg{
/*背景顏色*/
background: #f00;
/*字體顏色*/
color: #fff;
width: 80px;
}
ul, li {
/*清除ul和li上默認(rèn)的小圓點(diǎn)*/
list-style: none;
}
ul {
/*清除子菜單的縮進(jìn)值*/
padding: 0;/*IE8,IE9,火狐可以；IE7，IE6，IE5.5不行*/
margin: 0;/*都可以了*/
}
</style>
<script type="text/javascript">
$(function(){
//setColor是鼠標(biāo)移動(dòng)的方法
$("li").mouseover(setColor).mouseout(setColor);
function setColor(){
//如果存在（不存在）就刪除（添加）一個(gè)類
$(this).toggleClass("bg");
}
});
</script>
</head>
<body>
<div id="div">
<ul>
<li>橫向菜單1</li>
<li>橫向菜單2</li>
<li>橫向菜單3</li>
<li>橫向菜單4</li>
<li>橫向菜單5</li>
<li>橫向菜單6</li>
</ul>
</div>
</body>
</html>
5、運(yùn)行效果圖
2、建立一個(gè)jQuery示例的項(xiàng)目。
3、將js庫(kù)放到j(luò)Query示例的項(xiàng)目中。
4、寫一個(gè)html頁(yè)面
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="author" content="Kong.Yee"/>
<meta http-equiv="corporation" content="廣州匡興軟件科技有限公司"/>
<meta http-equiv="contact" content="791663094或kong.yee@foxmail.com"/>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.10.2.js"></script>
<title>Insert title here</title>
<style type="text/css">
.bg{
/*背景顏色*/
background: #f00;
/*字體顏色*/
color: #fff;
width: 80px;
}
ul, li {
/*清除ul和li上默認(rèn)的小圓點(diǎn)*/
list-style: none;
}
ul {
/*清除子菜單的縮進(jìn)值*/
padding: 0;/*IE8,IE9,火狐可以；IE7，IE6，IE5.5不行*/
margin: 0;/*都可以了*/
}
</style>
<script type="text/javascript">
$(function(){
//setColor是鼠標(biāo)移動(dòng)的方法
$("li").mouseover(setColor).mouseout(setColor);
function setColor(){
//如果存在（不存在）就刪除（添加）一個(gè)類
$(this).toggleClass("bg");
}
});
</script>
</head>
<body>
<div id="div">
<ul>
<li>橫向菜單1</li>
<li>橫向菜單2</li>
<li>橫向菜單3</li>
<li>橫向菜單4</li>
<li>橫向菜單5</li>
<li>橫向菜單6</li>
</ul>
</div>
</body>
</html>
5、運(yùn)行效果圖
您可能感興趣的文章:
- jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法
- jQuery使用toggleClass方法動(dòng)態(tài)添加刪除Class樣式的方法
- jQuery中toggleClass()方法用法實(shí)例
- 用jQuery toggleClass 實(shí)現(xiàn)鼠標(biāo)移上變色
- jQuery方法簡(jiǎn)潔實(shí)現(xiàn)隔行換色及toggleClass的使用
- jQuery中與toggleClass等價(jià)的程序段 以及未來(lái)學(xué)習(xí)的方向
- 通過(guò)jquery toggleClass()屬性制作文章段落更改背景顏色
相關(guān)文章
本節(jié)主要介紹兩點(diǎn)：1.緩存問(wèn)題 2.中文問(wèn)題2011-10-10
jQuery 選擇器用法實(shí)例分析【prev + next】
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實(shí)例形式分析了jQuery選擇器prev 與 next基本功能、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
基于jQuery實(shí)現(xiàn)文本框縮放以及上下移動(dòng)功能
這里給大家分享一段個(gè)人覺(jué)著非常實(shí)用也經(jīng)常用于項(xiàng)目中的代碼，本代碼基于jQuery實(shí)現(xiàn)了文本框縮放以及上下移動(dòng)功能，給需要的網(wǎng)友們參考下吧2014-11-11
jQuery實(shí)現(xiàn) 注冊(cè)時(shí)選擇閱讀條款 左右移動(dòng)
本篇文章，小編將為大家介紹jQuery實(shí)現(xiàn) 注冊(cè)時(shí)選擇閱讀條款 左右移動(dòng)，有需要的朋友可以參考一下2013-04-04
jQuery基于當(dāng)前元素進(jìn)行下一步的遍歷
通過(guò)jQuery方法選中了元素，如何基于這些已經(jīng)選中的元素進(jìn)行下一步的遍歷呢？下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-05-05
JQuery將文本轉(zhuǎn)化成JSON對(duì)象需要注意的問(wèn)題
在JQuery的許多方法中，很多方法的參數(shù)可以傳入一個(gè)JSON對(duì)象，比如Ajax方法的第二個(gè)參數(shù)。怎么將文本轉(zhuǎn)化成JSON對(duì)象，需要注意以下問(wèn)題2011-05-05
jquery簡(jiǎn)單的拖動(dòng)效果實(shí)現(xiàn)原理及示例
本文為大家詳細(xì)介紹下jQuery拖曵的簡(jiǎn)單實(shí)例，具體的實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
jquery實(shí)現(xiàn)圖片列表鼠標(biāo)移入微動(dòng)
本文主要介紹利用jquery實(shí)現(xiàn)圖片列表鼠標(biāo)移入微動(dòng)的實(shí)例。代碼清晰，需要的朋友來(lái)看下吧2016-12-12
ASP.NET jQuery 實(shí)例11 通過(guò)使用jQuery validation插件簡(jiǎn)單實(shí)現(xiàn)用戶登錄頁(yè)面驗(yàn)證功能
從這節(jié)開(kāi)始，我們開(kāi)始學(xué)習(xí)如何在ASP.NET控件中使用jQuery validation 插件，首先要用它，必須先了解它有什么用2012-02-02
簡(jiǎn)單實(shí)用jquery版三級(jí)聯(lián)動(dòng)select示例
本文主要為大家介紹下通過(guò)jquery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)select這里用到的json文件，只是事例，根據(jù)情況添加或編寫，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07