0

Facebook はどのように通知センターのアイコンを切り替えて、クリックしたときに通知とともにそれぞれの DIV を表示しますか?

少なくとも、Facebook Web サイトの左上にあるロゴの近くにある Facebook 通知センターを操作したことがあるでしょう。彼らはどのようにそれをトレーニングしますか??

これは、下の画像で、私が話しているFacebook通知センターを示しています FB_NCToggle

これは、ワークアウトに使用していた私のサンプルコードです..

    <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>

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>
4

1 に答える 1

0

いくつかの小さな読書を読んだ後、いくつかのコードを書いてみましたが、それは機能し、私の質問が何であるかを満足させます。ypu の連中が気にしない場合は、私のコードを調べて、何を改善、追加、または削除するかを教えてください。

これがjsFiddle 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;
    });
    */
});
于 2013-03-25T13:18:47.713 に答える