-1

我想知道是否有人可以帮助我。在“关于我们”页面上，每个团队成员都有一个个人资料，下面是他们的电子邮件地址。我希望有一张图片，当点击图片时它会消失并且团队成员的电子邮件地址在它的位置。

该页面是 - http://www.thescribblingape.com/aboutus/

我对 JavaScript 或 jQuery 没有太多经验，但我想我可以使用它们来做到这一点。

我尝试使用；

<div id="email-button">

  <img class="email-button-image" onclick="this.style.display = 'none';" alt="Email" src="http://www.thescribblingape.com/wp-content/uploads/2013/06/tSA-Email-Button-post-150x150.png" width="150" height="150" />

   sam@thescribblingape.com

 </div>

CSS

#email-button {
width: 300px;
height: 300px;
}
4

1 回答 1

1

对于您的问题，这是一个相对简单的解决方案，尽管我已将文本包装在一个元素中以通过 CSS 轻松定位它：

<div id="email-button">
    <img class="email-button-image" alt="Email" src="http://www.thescribblingape.com/wp-content/uploads/2013/06/tSA-Email-Button-post-150x150.png" width="150" height="150" />
    <p>sam@thescribblingape.com</p>
</div>

以下 JavaScript 将在p和img可见之间切换：

function toggle(el) {
    var img = el.getElementsByTagName('img'),
        p = el.getElementsByTagName('p');
    for (var i = 0, len = img.length; i<len; i++){
        img[i].style.display = img[i].style.display === 'none' ? 'block' : 'none';
    }
    for (var i = 0, len = p.length; i<len; i++){
        p[i].style.display = p[i].style.display === 'block' ? 'none' : 'block';
    }
}

var button = document.getElementById('email-button');

button.addEventListener('click', function () {
    toggle(button);
});

JS 小提琴演示。

上面可以用 jQuery 重写，给出：

$('#email-button').click(function () {
    $(this).find('img, p').toggle();
});

JS 小提琴演示。

通过对 HTML 进行一些重写，您甚至可以只使用 HTML 和 CSS 来实现；HTML 被重写为：

<label for="toggle">
    <input id="toggle" type="checkbox" />
    <img class="email-button-image" alt="Email" src="http://www.thescribblingape.com/wp-content/uploads/2013/06/tSA-Email-Button-post-150x150.png" width="150" height="150" />
    <p>sam@thescribblingape.com</p>
</label>

和CSS：

label {
    display: block;
    cursor: pointer;
}

label input {
    display: none;
}

label input + img,
label input:checked ~ p {
    display: block;
}

label input:checked + img,
label input ~ p {
    display: none;
}

JS 小提琴演示。

不幸的是，尽管这确实需要一个相当最新的浏览器。

于 2013-06-26T21:43:47.930 回答