如果单击,选项卡中的徽章将重置为 0

Badges in tabs reset to 0 if clicked

本文关键字:徽章 单击 选项 如果      更新时间:2023-09-26

这是我在选项卡上的代码。我不知道如果我点击它,我将如何使徽章计数重置为 0。 无论如何,我正在使用Codeigniter,如果有人知道如何做到这一点。请帮助我,我将不胜感激。谢谢

<div class="container-fluid"  > <!--Main container-->
    <div class="row">
        <div class="col-md-8 ui segment" style="min-height:300px;">
            <br>
            <ul class="nav nav-tabs" id="tabs">
              <li class="active"><a data-toggle="tab" href="#home" style="">Home</a></li>
              <li><a data-toggle="tab" id="tabbad" href="#menu1">PM's <span class="badge"> 3</span> </a></li>
              <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
            </ul>
            <div class="tab-content">
              <div id="home" class="tab-pane fade in active panel panel-default">
                <div class="panel-body">
                <h3>HOME</h3>
                <p>Some content.</p>
               </div>
              </div>
              <div id="menu1" class="tab-pane fade panel panel-default">
                <div class="panel-body">
                <h3>HOME</h3>
                <p>Some content.</p>
               </div>
              </div>
              <div id="menu2" class="tab-pane fade panel panel-default  ">
                <div class="panel-body">
                <h3>HOME</h3>
                <p>Some content.</p>
               </div>
              </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div><!--row-->
</div><!--Main container-->

在范围中添加onclick函数

<li><a data-toggle="tab" id="tabbad" href="#menu1">PM's <span class="badge" onclick="reset(this);"> 3</span> </a></li>

定义重置函数/给它起任何你喜欢的名字

function reset(ttr){
    ttr.innerHTML=0;
}

如果需要,请将onclick函数放在 a 元素中,并追加所需的值"PM"+whatever