jQuery toggleClass應用實例(附效果圖)
更新時間：2014年04月06日 16:53:51 作者：
這篇文章主要介紹了jQuery toggleClass的應用,需要的朋友可以參考下
1、首先到jQuery官網(wǎng)下載js庫，網(wǎng)址為http://jquery.com/
2、建立一個jQuery示例的項目。
3、將js庫放到jQuery示例的項目中。
4、寫一個html頁面
<!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上默認的小圓點*/
list-style: none;
}
ul {
/*清除子菜單的縮進值*/
padding: 0;/*IE8,IE9,火狐可以；IE7，IE6，IE5.5不行*/
margin: 0;/*都可以了*/
}
</style>
<script type="text/javascript">
$(function(){
//setColor是鼠標移動的方法
$("li").mouseover(setColor).mouseout(setColor);
function setColor(){
//如果存在（不存在）就刪除（添加）一個類
$(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、運行效果圖
2、建立一個jQuery示例的項目。
3、將js庫放到jQuery示例的項目中。
4、寫一個html頁面
復制代碼 代碼如下:
<!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上默認的小圓點*/
list-style: none;
}
ul {
/*清除子菜單的縮進值*/
padding: 0;/*IE8,IE9,火狐可以；IE7，IE6，IE5.5不行*/
margin: 0;/*都可以了*/
}
</style>
<script type="text/javascript">
$(function(){
//setColor是鼠標移動的方法
$("li").mouseover(setColor).mouseout(setColor);
function setColor(){
//如果存在（不存在）就刪除（添加）一個類
$(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、運行效果圖
相關文章
這篇文章主要介紹了JQuery CheckBox（復選框）操作方法匯總,本文講解了獲取單個checkbox選中項、獲取多個checkbox選中項、設置第一個checkbox 為選中值、設置最后一個checkbox為選中值等內(nèi)容,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了Jquery取得iframe下內(nèi)容的方法，有需要的朋友可以參考一下2013-11-11
jQuery.ajax()功能比較強大，可配置的參數(shù)比較多，本文主要對這個方法的注意事項進行總結。有相同需求的童鞋們也來仔細看看吧，希望對大家能有所幫助2014-11-11
jQuery setTimeout傳遞字符串參數(shù)報錯的解決方法
這篇文章主要介紹了jQuery setTimeout傳遞字符串參數(shù)報錯的解決方法,需要的朋友可以參考下2014-06-06
jQuery的ztree仿windows文件新建和拖拽功能的實現(xiàn)代碼
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。這篇文章主要介紹了jQuery的ztree仿windows文件新建和拖拽功能的實現(xiàn)代碼,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細介紹了jqGrid表格底部匯總、合計行footerrow處理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了jQuery中bind()方法用法,實例分析了bind()方法的功能、定義及為匹配元素的特定事件綁定事件處理方法的技巧,需要的朋友可以參考下2015-01-01
jquery 全選、全不選、反選效果的實現(xiàn)代碼【推薦】
下面小編就為大家?guī)硪黄猨query 全選、全不選、反選效果的實現(xiàn)代碼【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05JQuery對checkbox操作 （循環(huán)獲?。?/a>
下面是Jquery對checkbox的一些操作，全選，反選，取消全選等等.2011-05-05
我們在做網(wǎng)站的時候經(jīng)常會遇到這樣的問題：一個頁面有大量的圖片導致頁面加載速度緩慢，經(jīng)常會出現(xiàn)一個白頁用戶體驗很不好。那么如何解決這個問題呢？下面我來介紹一種在實際應用中經(jīng)常會使用到的js預加載的方法。2015-04-04