Javascript 选择Div-未读邮件-阅读类似facebook收件箱的邮件

我正试图使左侧导航链接像facebook收件箱一样。 第一类有三种不同。未读（浅蓝色）2.已读（白色）3。选定（深蓝色）

事实上，如果我用正常的方式做，这很容易。这意味着每次我点击阅读每条消息时都需要重新加载页面

但在这种情况下，我想完全用ajax的方式来做。我已经完成了所有的工作。但要在最后一步解决问题

想法是：我使用cookie（jquery.cookie插件）存储上次单击的Div Id，然后每次单击Div阅读消息时，上次单击的Div Id必须变为白色。 （因为消息已被读取）

当我点击未读邮件分区时，出现了一个问题： 未读邮件Div再次变为浅蓝色

我使用了很多方法，包括普通javascript和jQuery

让我们先看看我的部门： 示例div: ：：div的id是数据库中的数组，但在这里我使其易于查看

<div id ='001' class='normal' onclick=readmsg(id_msg1)></div>
<div id ='002' class='normal' onclick=readmsg(id_msg2)></div>
<div id ='003' class='normal' onclick=readmsg(id_msg3)></div>

为了将类unread-->更改为类read，我只做了这些

var ck= $.cookie('last_read');  

    $("#"+id_msg).addClass('inbx_unread'); // 

    $("#"+last_read).removeClass('inbx_unread');// get the last ID of clicked div and remove class unread which´s light-blue

我也尝试过普通的javascript，比如：

document.getElementById(last_read).className.replace("inbx_unread","");

//我这里有更多的代码，但正如我上面提到的，我已经完成了。唯一的一个问题是，单击其他div后，未读（浅蓝色）再次变回浅蓝色

我已签入firebug和alert，我得到了正确的值。

我不知道像cookie那样存储临时数据的其他方法

---

简而言之，在我单击另一个Div之后，如何停止已单击的未读Div以再次返回其原始类？

这里是一种稍微不同的方法。 您可以只使用jQuery事件

HTML

<div id ='001' class='message unread'>Message 1</div>
<div id ='002' class='message unread'>Message 2</div>
<div id ='003' class='message unread'>Message 3</div>

您可以检查正在工作的JSFIDLE：

---

希望有帮助，祝你好运

我想我会重建我的角色。试试你给我的密码。感谢您的努力，帮助我找到解决方案。您是对的，JSFIDEL在safari中不起作用。但是，当您在localhost中查看真正的html文件时，它会起作用。您可以加载此文件并将其签出：

<div id ='001' class='message unread'>Message 1</div>
<div id ='002' class='message unread'>Message 2</div>
<div id ='003' class='message unread'>Message 3</div>

$(document).ready(function(){

    $(".message").click(function() {

        // we get the clicked element ID
        var id_msg = $(this).attr('id');

        // we read the cookie, to remove the previous selected class to the last_read element
        var last_read = $.cookie('last_read');
        $('#' + last_read).removeClass("inbx_selected");

        // we set the cookie, so we keep can remove the selected class in the next click
        $.cookie('last_read', id_msg);

        //
        // probably, here you should do some AJAX post to update the message status at the database
        // 

        // we remove the unread class, and add teh selected class
        $(this).removeClass("inbx_unread").addClass("inbx_selected");

    });

});