当单击Facebook时，Facebook如何切换其通知中心图标以显示带有通知的各个DIV？

Question

How does Facebook toggle its notification center icons to display the respective DIVs with the notifications when clicked?

All of you have at-least interacted with the Facebook notifications center on the top left near the logo on the Facebook website. How do they workout that??

This is the Image below will illustrate the Facebook notification center I am talking about

This is my sample code I was using to workout that..

    <style>
        div, a {
            display: block;
        }

        body {
            width: 500px;
            margin: 100px auto;
        }

        a {
            border: 1px solid #ccc;  
            background: #ececec;  
            -webkit-border-radius: 3px;  
            padding: 5px 20px;  
            text-align: center;
            color: red;
            text-decoration: none;
        }

        #one {
            margin-bottom: 30px;
        }

        .dn_js {
            display: none;
        }

        .db_js {
            display: block;
        }

    </style>

    <div class="wrap">
        <div id="one">
            <a href="#" data-open="frdz" class="aTggl active">Friends</a>
            <div id="frdz" class="innerWrap dn_js">Mike</div>
        </div>
        <div id="two">
            <a href="#" data-open="Ntfn" class="aTggl">Noticiations</a>
            <div id="Ntfn" class="innerWrap dn_js">Peter</div>
        </div>
    </div>

Here is the JS

    <script type="text/javascript">
        $(document).ready(function (e) {
            $(".aTggl").on("click", function(e) {
                e.preventDefault();
                var $this = $(this);

                $(".active").removeClass("active");

                $this.addClass("active").parent().siblings().children(".innerWrap").addClass("dn_js");

                var content_show = $(this).data("open");
                $("#"+content_show).addClass("db_js"); 
            });
        });
    </script>

Answer 1

After doing some small reading reading I have tried out writing some code and it does work and kind of satisfy what my question was all about. If ypu guys don't mind, you can look through my code and tell me what to improve, add or remove.

Here is the jsFiddle Demo . Thank you.

Here is also the code from the above demo.

<div id="nc_wrap">
    <div class="one nc_node"> 
      <a class="node_link" data-nc="frd_rqst">Friend Requests</a>
      <div id="frd_rqst" class="ncInnerWrap dn_js">F_R Notfz</div>
    </div>

    <div class="two nc_node">
      <a class="node_link" data-nc="msg_nc">Messages</a>
      <div id="msg_nc" class="ncInnerWrap dn_js">Msg Notfz</div>
    </div>
</div>



     #nc_wrap {
    display:block;
    width:100%;
    height:40px
}
       .one, .two {
    display:inline-block;
    width:40%;
    height:100%;
    float:left;
    background-color:#ddd
}
.one a, .two a {
    display:block;
    text-align:center;
    line-height:100%;
    height:100%;
    padding:0;
    margin:0;
    cursor:pointer;
}
.one {
    margin-right: 5%;
}
.activeNC {
    background-color: red;
}
.dn_js {
    display:none;
}
.db_js {
    display:block;
}

        $(document).ready(function () {
    $(".nc_node").on("click", ".node_link", function (event) {
        event.preventDefault();
        var $this = $(this);
        var nc_panel = $("#" + $this.data("nc"));

        $('.nc_node a').not($this).removeClass('activeNC').next(".ncInnerWrap").removeClass("db_js").addClass("dn_js");
        //$($this).stop(true, true).toggleClass("activeNC");
        $this.toggleClass("activeNC").next(".ncInnerWrap").toggleClass("db_js dn_js");
    });

    /*$(this).on("click", function(){
        $(".node_link").removeClass("activeNC");

        return false;
    });
    */
});