Question

我正在尝试使用下面的设计创建一个插件;当点击日期时，div的背景颜色变为紫色，css三角形也变为紫色，同时出现带有点击日期的事件信息的帖子（或者显示在顶部）。默认情况下，应该有一个日期框在开始时为紫色，其事件发布也应该是可见的。显然，我希望其他日期框在单击另一个日期框时返回其原始颜色。

以下是查看设计的链接：http://www.flickr.com/photos/54875551@N05/5662143061/in/photostream。

我尝试使用以下内容在点击时创建背景颜色更改，但它也不适用于css三角形。

var highlightLink = function () {
var active = null, colour = '#97558b';
    if (this.attachEvent) this.attachEvent('onunload', function () {
    active = null;
});
return function (element) {
    if ((active != element) && element.style) {
    if (active) active.style.backgroundColor = '';
    element.style.backgroundColor = colour;
    active = element;
}
};
}();

和

 <div id="datebox1" class="date" onclick="highlightLink(this);">                                    
    <h1>MAY</h1>
    <h1 class="num">14</h1>                                          
    <div class="date-tri" onclick="highlightLink(this);"></div>
 </div>

因此，我不仅因为如何将css三角形添加到onclick动作而感到茫然，但我不知道如何将其与事件帖子（从我的php中的日期框中单独调用）进行协调，如下所示：

<div id="event1" class="event">
    <h2 class="eventtitle">Brainerd Spring Arts &#038; Crafts Festival</h2>
    <div id="summary">
        <p>150+ artists/crafters with quality handmade items! 9:30-4 pm Brai High School. </p>
    </div>               
    <div class="link">
        <a href=""><p>http://www.excelsiorartonthelake.com</p></a>
    </div>                                              
</div>

Answer 1

您不应该使用Javascript分配样式。我说你永远都不应该，但有些人不同意。

我要做的是在节点上添加/删除/切换css类。使用css类，您可以设置样式的样式：样式表，可读，可扩展。

所以尝试这样的事情：

<div id="datebox1" class="date">                                    
    <h1>MAY</h1>
    <h1 class="num">14</h1>                                          
    <div class="date-tri"></div>
</div>
<div id="datebox2" class="date">                                    
    <h1>MAY</h1>
    <h1 class="num">18</h1>                                          
    <div class="date-tri"></div>
</div>

<script>
var active = null;
Array.prototype.slice.call(document.querySelectorAll('div.date')).forEach(function(el) {
    el.addEventListener('click', function(e) {
        if (this !== active) {
            if ( active ) {
                active.classList.remove('active');
            }
            this.classList.add('active');
            active = this;
        }
    }, false);
});
</script>

或者看到它的实际效果：http://jsfiddle.net/rudiedirkx/349Vr/

<强> PS
我使用.addEventListener和.classList作为现代浏览器。看起来你正在使用一个库（我看到.attachEvent）...

如果你可以使用jQuery：这将使它更容易。循环和附加事件：

$('div.date').click(function(e) {

添加/删除课程：

$(active).removeClass('active');
$(this).addClass('active');

更改背景颜色并在同一个点击显示/隐藏 - Javascript

1 个答案: