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à)的程序段 以及未來學(xué)習(xí)的方向
- 通過jquery toggleClass()屬性制作文章段落更改背景顏色
相關(guān)文章
JQuery CheckBox（復(fù)選框）操作方法匯總
這篇文章主要介紹了JQuery CheckBox（復(fù)選框）操作方法匯總,本文講解了獲取單個(gè)checkbox選中項(xiàng)、獲取多個(gè)checkbox選中項(xiàng)、設(shè)置第一個(gè)checkbox 為選中值、設(shè)置最后一個(gè)checkbox為選中值等內(nèi)容,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了Jquery取得iframe下內(nèi)容的方法，有需要的朋友可以參考一下2013-11-11
jQuery.ajax()功能比較強(qiáng)大，可配置的參數(shù)比較多，本文主要對(duì)這個(gè)方法的注意事項(xiàng)進(jìn)行總結(jié)。有相同需求的童鞋們也來仔細(xì)看看吧，希望對(duì)大家能有所幫助2014-11-11
jQuery setTimeout傳遞字符串參數(shù)報(bào)錯(cuò)的解決方法
這篇文章主要介紹了jQuery setTimeout傳遞字符串參數(shù)報(bào)錯(cuò)的解決方法,需要的朋友可以參考下2014-06-06
jQuery的ztree仿windows文件新建和拖拽功能的實(shí)現(xiàn)代碼
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。這篇文章主要介紹了jQuery的ztree仿windows文件新建和拖拽功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-12-12
jqGrid表格底部匯總、合計(jì)行footerrow處理
這篇文章主要為大家詳細(xì)介紹了jqGrid表格底部匯總、合計(jì)行footerrow處理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了jQuery中bind()方法用法,實(shí)例分析了bind()方法的功能、定義及為匹配元素的特定事件綁定事件處理方法的技巧,需要的朋友可以參考下2015-01-01
jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)硪黄猨query 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jQuery簡(jiǎn)單實(shí)現(xiàn)圖片預(yù)加載
我們?cè)谧鼍W(wǎng)站的時(shí)候經(jīng)常會(huì)遇到這樣的問題：一個(gè)頁(yè)面有大量的圖片導(dǎo)致頁(yè)面加載速度緩慢，經(jīng)常會(huì)出現(xiàn)一個(gè)白頁(yè)用戶體驗(yàn)很不好。那么如何解決這個(gè)問題呢？下面我來介紹一種在實(shí)際應(yīng)用中經(jīng)常會(huì)使用到的js預(yù)加載的方法。
2015-04-04