Question

我使用onClick功能在点击时更改图像。我希望图像下方的div仅在单击图像时显示。如何仅在单击图像时显示此div？

＆＃13;

<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>

＆＃13;

Answer 1

使用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>

Answer 2

您只需要先隐藏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>

Answer 3

使用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>

图像处于活动状态时显示div

3 个答案: