이 글은 아이콘 숨기기와 표시 전환 기능을 동시에 구현하기 위해 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> <!--隐藏/显示 控制按钮--> <p><img id="ctr" scr="./images/01.jpg"></p> <!--被控制元素--> <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); }); });
관련 권장 사항:
JS를 사용하여 아이콘 숨기기와 표시를 동시에 전환하는 방법
마우스를 위로 움직일 때 아이콘 회전 효과를 얻는 CSS 방법에 대한 자세한 설명
HTML 웹 페이지의 브라우저 제목 표시줄에 작은 아이콘을 표시하는 방법 소개
jquery가 제어하는 CSS 절대 위치 지정 위치 효과(예: 마우스 이동 시 아이콘 표시) 레이어에 관련 정보 표시
위 내용은 jQuery와 동시에 아이콘을 전환하는 기능에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!