我有一个包含一些导航选项卡的页面。如果该选项卡有通知，则会显示一个徽章。当选项卡处于焦点状态时，我想要一个 ajax 调用来发出服务器请求，如果响应成功，我希望将徽章重置为零。我可以显示徽章并且 ajax 调用成功返回(我没有在下面的代码中包含它)然后当我尝试为选项卡设置数据属性时，值没有改变。
相关代码如下:
<div class="container-fluid">
<br/>
<div class="col-sm-10">
<div class="panel with-nav-tabs panel-tab-block">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" class="" href="#projects-tab">Projects</a>
</li>
<li>
<a data-toggle="tab" id="forum-notification-badge" class="notification-badge"
data-notification-badge="1" href="#forum-tab">Forum</a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div id="projects-tab" class="tab-pane fade in active">
<div class="row">
<div class="col-sm-12">
<div class="panel with-nav-tabs panel-tab-block">
<h1>
Projects
</h1>
</div>
</div>
</div>
<div class="row">
<div class="spacer-sml"></div>
</div>
<div class="row">
<div class="spacer-sml"></div>
</div>
</div>
<div id="forum-tab" class="tab-pane fade">
<div class="tab-block-content forum-posts">
<div class="">
<div class="col-sm-12">
<h1>
Forum
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JQuery:
jQuery(document).ready(function( $ ) {
$('#forum-notification-badge').on("focus", function() {
var self = $(this);
//Do ajax call if success reset the badge to zero
self.data("notification-badge","0");
console.log("set badge to zero");
});
});
CSS:
.nav {
border: 1px;
border-color: #2f70b1;
}
.nav-bar {
margin-bottom: 0px !important;
}
.navbar-default {
background-color: #1d3c5c;
border-color: #000000;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
margin-bottom: 0px !important;
border-radius: 0px;
}
.navbar-default .navbar-header .navbar-brand {
color: #777;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus{
color: #777;
}
.navbar-default .navbar-header .navbar-toggle {
font-weight: 700;
font-size: 12px;
color: #222222;
text-transform: uppercase;
}
.navbar-default .nav>li>a, .navbar-default .nav>li>a:focus {
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: #222222;
}
.navbar-default .nav>li>a:hover, .navbar-default .nav>li>a:focus:hover {
}
.navbar-default .nav>li.active>a, .navbar-default .nav>li.active>a:focus{
color: #F05F40 !important;
background-color: transparent;
}
.navbar-default .nav>li.active>a:hover, .navbar-default .nav>li.active>a:focus:hover{
background-color: #1d3c5c;
}
@media ( min-width : 768px) {
.navbar-default {
background-color: #1d3c5c;
}
.navbar-default .navbar-header .navbar-brand {
color: #ddd;
}
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus
{
color: white;
}
.navbar-default .nav>li>a, .navbar-default .nav>li>a:focus {
color: #ddd;
}
.navbar-default .nav>li>a:hover, .navbar-default .nav>li>a:focus:hover {
color: white;
}
.navbar-default.affix {
background-color: white;
}
.navbar-default.affix .navbar-header .navbar-brand {
color: #F05F40;
font-size: 14px;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default.affix .nav>li>a, .navbar-default.affix .nav>li>a:focus {
color: #222222;
}
.navbar-default.affix .nav>li>a:hover, .navbar-default.affix .nav>li>a:focus:hover
{
color: #F05F40;
}
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
background-color: #286090;
}
.panel.with-nav-tabs.panel-tab-block{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li > a,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:focus {
color: #ffffff;
background-color: #999999;
}
.with-nav-tabs.panel-tab-block .nav-tabs > .open > a,
.with-nav-tabs.panel-tab-block .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:focus {
color: #fff;
background-color: #666666 ;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.active > a,
.with-nav-tabs.panel-tab-block .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li.active > a:focus {
color: #fff;
background-color: #2f70b1;
border-color: #2f70b1;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #fff;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
background-color: #4a9fe9;
}
.tab-block-content {
color: #202020;
}
.notification-badge {
position:relative;
padding-right: 1em;
}
.notification-badge[data-notification-badge]:after {
content:attr(data-notification-badge);
position:absolute;
top:-0.75em;
right:-0.75em;
font-size:0.75em;
background:red;
color:white;
width:1.5em;
height:1.5em;
text-align:center;
line-height:1.5em;
border-radius:50%;
box-shadow:0 0 1px #333;
}
我还创建了一个 jsfiddle
最佳答案
改用 attr()。
$('#forum-notification-badge').on("focus", function() {
var self = $(this);
//Do ajax call if success reset the badge to zero
self.attr("data-notification-badge",0);
console.log("set badge to zero");
});
关于jquery - ajax 调用后重置 CSS 徽章内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47355510/