이 글은 아이콘 숨기기와 표시 전환 기능을 동시에 구현하기 위해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
