标签不能正常工作

Question

我有三个标签，点击标签我希望发生两件事情，一个是href链接，另一个是改变颜色。 现在这两件事情都在发生，但唯一的问题是如果我点击选项卡两次就会发生颜色变化。

这是我的代码

<div class="col-sm-3 text-center sprtr-1">
      <a class="tab-link" id="movies" href="#events?eventType=Movies&industry={{selectedIndustry.name}}" onclick="if(!$('#movies').hasClass('active')){$('#performances').removeClass('active');$('#workshops').removeClass('active');$('#movies').addClass('active');
            }else{return false;}return true;" i18n="EVENT.MOVIES"><span class="glyphicon glyphicon-facetime-video"></span> MOVIES</a>

    </div>
    <div class="col-sm-3 text-center sprtr-1">

      <a class="tab-link" id="performances" href="#events?eventType=Performance&industry={{selectedIndustry.name}}" onclick="if(!$('#performances').hasClass('active')){$('#movies').removeClass('active');$('#workshops').removeClass('active');$('#performances').addClass('active');
            }else{return false;}return true;" i18n="EVENT.PERFORMANCES"><span class="glyphicon glyphicon-leaf"></span> PERFORMANCES</a>

    </div>
    <div class="col-sm-3 text-center">

      <a class="tab-link" id="workshops" href="#events?eventType=WorkShops&industry={{selectedIndustry.name}}" onclick="if(!$('#workshops').hasClass('active')){$('#movies').removeClass('active');$('#performances').removeClass('active');$('#workshops').addClass('active');
            }else{return false;}return true;" i18n="EVENT.WORKSHOPS"><span class="glyphicon glyphicon-gift"></span> WORKSHOPS</a>

    </div>

我正在编写内联代码，所以有人可以帮助我。

Answer 1

实际上，因为您正在使用 Bootstrap 并且events已为:active和:focus定义了a标记，所以您必须使用我要删除内联 jQuery ，以获得更好的编码标准，并在将来轻松调试。

代码片段（带内联jQuery）

a.active,
a.active:active,
a.active:focus {
  color: #f00;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-3 text-center sprtr-1">
  <a class="tab-link" id="movies" href="#events?eventType=Movies&industry={{selectedIndustry.name}}" onclick="if(!$('#movies').hasClass('active')){$('#performances').removeClass('active');$('#workshops').removeClass('active');$('#movies').addClass('active');
            }else{return false;}return true;" i18n="EVENT.MOVIES"><span class="glyphicon glyphicon-facetime-video"></span> MOVIES</a>

</div>
<div class="col-sm-3 text-center sprtr-1">

  <a class="tab-link" id="performances" href="#events?eventType=Performance&industry={{selectedIndustry.name}}" onclick="if(!$('#performances').hasClass('active')){$('#movies').removeClass('active');$('#workshops').removeClass('active');$('#performances').addClass('active');
            }else{return false;}return true;" i18n="EVENT.PERFORMANCES"><span class="glyphicon glyphicon-leaf"></span> PERFORMANCES</a>

</div>
<div class="col-sm-3 text-center">

  <a class="tab-link" id="workshops" href="#events?eventType=WorkShops&industry={{selectedIndustry.name}}" onclick="if(!$('#workshops').hasClass('active')){$('#movies').removeClass('active');$('#performances').removeClass('active');$('#workshops').addClass('active');
            }else{return false;}return true;" i18n="EVENT.WORKSHOPS"><span class="glyphicon glyphicon-gift"></span> WORKSHOPS</a>

</div>

代码片段（使用外部jQuery）[推荐]

$('.tab-link').on('click', function() {
  $('.tab-link').removeClass('active');
  if (!($(this).hasClass('active'))) {
    $(this).addClass('active');
  }
});

a.active,
a.active:active,
a.active:focus {
  color: #f00;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-3 text-center sprtr-1">
  <a class="tab-link" id="movies" href="#events?eventType=Movies&industry={{selectedIndustry.name}}" i18n="EVENT.MOVIES"><span class="glyphicon glyphicon-facetime-video"></span> MOVIES</a>

</div>
<div class="col-sm-3 text-center sprtr-1">

  <a class="tab-link" id="performances" href="#events?eventType=Performance&industry={{selectedIndustry.name}}" i18n="EVENT.PERFORMANCES"><span class="glyphicon glyphicon-leaf"></span> PERFORMANCES</a>

</div>
<div class="col-sm-3 text-center">

  <a class="tab-link" id="workshops" href="#events?eventType=WorkShops&industry={{selectedIndustry.name}}" i18n="EVENT.WORKSHOPS"><span class="glyphicon glyphicon-gift"></span> WORKSHOPS</a>

</div>