javascript - 选项卡无法正常工作

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>