![](/img/trans.png)
[英]How to Toggle “a” tag elements to show hidden DIVs just like the Facebook notification center
[英]How does Facebook toggle its notification center icons to display the respective DIVs with the notifications when clicked?
當單擊Facebook時,Facebook如何切換其通知中心圖標以顯示帶有通知的各個DIV?
所有人至少與Facebook網站徽標附近左上方的Facebook通知中心進行了交互。 他們如何鍛煉?
這是下圖,將說明我正在談論的Facebook通知中心
這是我用來鍛煉的示例代碼。
<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>
經過一番閱讀后,我嘗試編寫一些代碼,它確實有效並且可以滿足我的問題。 如果ypu家伙不介意,您可以瀏覽我的代碼並告訴我要改進,添加或刪除的內容。
這是jsFiddle演示 。 謝謝。
這也是上述演示的代碼。
<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;
});
*/
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.