Question

我有以下mailto链接

<div class="send_email">
 <a href="mailto:name@email.com">Send email</a>
</div>

点击后我想隐藏“发送电子邮件”。 div并显示发送的电子邮件＆＃39;格

<div class="email_sent">
 <p>Email sent</p>
 <a href="http://www.example.com/clear_sent">I changed my mind and didn't send the email</a>
</div>

然后在我点击之后我改变了主意＆＃39;链接它必须显示＆＃39;发送电子邮件＆＃39; div

CSS将类似于

.email_sent {
 visibility: hidden;
}

我安装了jquery但不知道如何显示和隐藏然后显示上面的div

Answer 1

$(function(){
  $('.send_email > a').click(function(){
    $('.send_email').hide();
    $('.email_sent').show();
  });
});

.email_sent { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="send_email">
 <a href="mailto:name@email.com">Send email</a>
</div>
<div class="email_sent">
 <p>Email sent</p>
 <a href="http://www.example.com/clear_sent">I changed my mind and didn't send the email</a>
</div>

Answer 2

试试这个：

$(document).ready(function() {
    $('.send_email a').on('click', function() {
        $(this).parent().hide();
        $('.email_sent').show();
    });
});

使用以下CSS：

.email_sent {
    display: none;
}

Here是一个有效的例子。

Answer 3

＆＃13;

$(document).ready(function(){
  $(".send_email a").click(function(event){
    event.preventDefault();
    
    
    $(".email_sent").removeClass("hidden");
    $(".send_email").addClass("hidden");    
    
    //Open send mail
    var email = 'test@yourdomain.com';
    var subject = 'your subject';
    var emailBody = 'Some blah';
    window.location = 'mailto:' + email + '?subject=' + subject + '&body=' +   emailBody;

  })
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="send_email">
 <a href="#">Send email</a>
</div>

<div class="email_sent hidden">
 <p>Email sent</p>
 <a href="http://www.example.com/clear_sent">I changed my mind and didn't send the email</a>
</div>

＆＃13;

单击mailto链接后如何切换2个div的可见性？

3 个答案: