當圖像處於活動狀態時顯示div

我已使用onClick函數在點擊時更改圖像。我想要一個div下面的圖像只顯示圖像被點擊。如何僅在圖像被點擊時才顯示該div？當圖像處於活動狀態時顯示div

<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png" 
 
onclick="this.src='https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png'"> 
 

 
<div class="showme"> my text</div>

來源

2017-08-22 DarrenLee

設置樣式爲'顯示：無;'使用'css'，然後針對該分區在JavaScript中，當你改變這種形象的src改變'css' .. – NewToJS

使用jQuery：

$(document).ready(function(){ 
 
    $('img').click(function(){ 
 
     $('.showme').show(); 
 
    }) 
 
})

.showme { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png"> 
 
<div class="showme"> my text</div>

來源

2017-08-22 02:14:07 Ehsan

你只需要先隱藏自己的DIV，然後單擊更改div來塊的屬性。

這裏是代碼片段：

function show() 
 
    { 
 
    $('.showme').css('display','block'); 
 
    }

.showme{ 
 
     display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://localhost:8888/ek/wp-content/uploads/2017/08/unselect1-1.jpg" onclick="show()"> 
 

 
<div class="showme"> my text</div>

來源

2017-08-22 01:57:41 wahdan

謝謝，完美 – DarrenLee

使用CSS樣式和jQuery：

$('#active').click(function() { 
 
$('.showme').css('display', 'block'); 
 
    } 
 
) 
 
//or img attr replace 
 
$('#activeimg').click(function() { 
 
$('#activeimg').attr('src', 'http://icons.iconarchive.com/icons/iconsmind/outline/128/Smile-icon.png'); 
 
    } 
 
)

.showme { 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://localhost:8888/ek/wp-content/uploads/2017/08/unselect1-1.jpg" alt="click" id="active"> 
 
<hr /> 
 
<img src="https://image.flaticon.com/icons/png/128/42/42877.png" title="click" id="activeimg"> 
 

 
<div class="showme">my text</div>

來源

2017-08-22 02:14:01 xtremal29

當圖像處於活動狀態時顯示div

回答

相關問題