收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > jQuery > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

jQuery實現切換隱藏與顯示同時切換圖標功能

HTML代碼:

<!doctype html>
<html>
<head> 
<meta charset=" utf-8"> 
<title>jq隱藏顯示圖標切換</title>
 <!--引入jq文件-->
<script type="text/javascript" scr="./js/jquery.min.js"></script>
</head>
<body>
<!--隱藏/顯示 控制按鈕-->
<div><img id="ctr" scr="./images/01.jpg"></div>
<!--被控制元素-->
<p id="info" style="display:none;">這里是要顯示或隱藏的內容</p>
</body>
</html>       

 JS代碼:

$(document).ready(function(){
//通過id="ctr"獲取元素click事件
   $("#ctr").click(function(){
//將顯示和隱藏兩個狀態下的顯示圖標路徑放入images變量中
    var images=['./images/01.jpg','./images/02.jpg'];
//通過class的值來判斷控制顯示的圖標樣式
    if($("#ctr").attr("class")=="down"){
    $("#ctr").attr("src",images[0]);
    $("#ctr").removeClass();
    }else{
    $("#ctr").attr("src",images[1]);
    $("#ctr").addClass("down");
    }
//用于控制元素的隱藏或顯示 主要方法toggle(),300是控制元素顯示或隱藏的速度
    $("#info").toggle(300);
  });  
});  

以上的就是實現 隱藏/顯示 效果的大概流程,因為本人是新手有些不完美的地方還請多多包涵。如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

Bootstrap柵格系統的使用詳解
前言Bootstrap是基于HTML、CSS、JAVASCRIPT的,它簡潔靈活,使得Web開發更加快捷。而柵格系統是Bootstrap中的核心,正是因為柵格系統的存在,Bootstrap才能有著

簡單實現jQuery彈窗效果
本文實例為大家分享了jQuery彈窗效果展示的具體代碼,供大家參考,具體內容如下!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title彈窗/titlescripttype="text/javascript

Bootstrap框架建立樹形菜單(Tree)的實例代碼
這里的Tree指的是樹形菜單,這篇文章通過一個實例來講解一下,在Bootstrap框架下怎么去建立一個樹形菜單。前提:先添加Bootstrap和JQ的引用linkrel="styleshe

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
时时彩免费分析软件