點擊按鈕顯示或隱藏圖片

本文轉載自查看原文 2017-09-16 13:35 3855 點擊按鈕顯示或隱藏圖片

jquery的show/hide可以

或者jquery中的toggleClass（）方法

<!DOCTYPE html>
<html lang="en">
　　<head>
　　<meta charset="UTF-8">
　　<title>點擊顯示或隱藏圖片</title>
　　<style>
    .show{
    　　display: block;
    }
    .hidden{
    　　display: none;
    }
　　</style>
</head>
<body>
　　<button>change</button>
　　　　<img class="show" src="https://static.cnblogs.com/images/adminlogo.gif" alt="博客園">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
　　<script>

　　//jquery 中直接切換className

　　// $('button').click(function(){
　　// 　　    $('img').toggleClass('hidden');
　　// })

　　//原生js
　　var btn = document.getElementsByTagName('button')[0];
　　var img = document.getElementsByTagName('img')[0];

　　btn.onclick = function(){
　　　　if(img.className == "show" ){
　　　　　　img.className = "hiden";
　　　　}else{
　　　　　　img.className='show';
　　　　}
　　}
　　</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 運用JQ點擊按鈕讓一張圖片隱藏和顯示 JS ------ 點擊按鈕顯示與隱藏點擊按鈕隱藏和顯示div 點擊按鈕，顯示隱藏內容，再次點擊內容，內容隱藏 React 點擊按鈕顯示div與隱藏div Vue 按鈕點擊控制顯示隱藏 jquery點擊按鈕顯示和隱藏DIv Axure 點擊某按鈕，控件顯示隱藏事件點擊按鈕顯示彈窗，點擊空白地方隱藏 15點擊按鈕，設置div顯示和隱藏div