Question

我正在尝试向wordpress页面添加公告栏。我知道如何添加栏，但是当用户点击栏上的“x”时我也希望它消失。

到目前为止我的代码：

CSS

#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}

HTML

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="...." />
    TEXT HERE
</div>

现在我如何在wordpress中实现JS，以便在用户点击“x”图像时通知消失？

Answer 1

当你不使用jQuery时，你可以使用纯Javascript。仅仅为4行代码加载jQuery就有点矫枉过正了。

document.getElementById("close_message").onclick = function() {
    document.getElementById("message_box").style.display = 'none';
};

Answer 2

您可以使用简单的jQuery函数

$(function(){
    $('#close_message').click(function(){
        $('#message_box').remove();
    });
});

示例：http://jsfiddle.net/qsfjC/

添加公告栏到Wordpress

2 个答案: