点击即可更改javascript中的类

Question

我有这个侧栏，有一堆<a href>链接到同一页面

我有这个JS代码，但之前的<a href>链接不会更改回tab-title并保持活动状态

我希望这样，当用户点击链接时，<a href>会从class="tab-title"更改为class="tab-title-active"

＆＃13;

＆＃13;

$(document).ready(function() {
  $('a').click(function() {
    $(this).removeClass('tab-title');
    $(this).addClass('tab-title-active');
    $(this).siblings().removeClass('tab-title-active');
    $(this).siblings().addClass('tab-title');
    console.log($(this).attr("class"));
  });
});

＆＃13;

a.tab-title{
    font-size: 18px;
    font-weight: 400;
    list-style: none;
    color: #444;
    margin-top: 10px;
}

a.tab-title-active{
    font-size: 18px;
    font-weight: bold;
    list-style: none;
    color: #0091e4;
    margin-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="sidebar" style="position: fixed;">
  <div class="tab">
    <h5><a href="#tab-title-0" class="tab-title-active">Binary</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-1" class="tab-title">About</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-2" class="tab-title">Representation</a></h5>
  </div>
</div>

<div class="content">
  <h1 class="tab-title" id="tab-title-0">Binary</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-1">About</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-2">Representation</h1>
  <p>
    <!-- stuff written -->
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

$(document).ready(function() {
  $('a').click(function() {
    $('a').removeClass('tab-title-active');//this would remove active class from previous hyperlinks and the remaining code will apply the same
    $(this).removeClass('tab-title');
    $(this).addClass('tab-title-active');
    $(this).siblings().removeClass('tab-title-active');
    $(this).siblings().addClass('tab-title');
    console.log($(this));
  });
});

Answer 2

您需要将所有a tag分类.tab-title-active更改为tab-title。然后添加this类名为.tab-title-active

的班级

工作代码段

＆＃13;

＆＃13;

$(document).ready(function() {
  $('a').click(function() {
    $('a').removeClass('tab-title-active').addClass('tab-title');
    $(this).addClass('tab-title-active');
    console.log($(this).attr('class'));
  });
});

＆＃13;

a.tab-title {
  font-size: 18px;
  font-weight: 400;
  list-style: none;
  color: #444;
  margin-top: 10px;
}

a.tab-title-active {
  font-size: 18px;
  font-weight: bold;
  list-style: none;
  color: #0091e4;
  margin-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="sidebar" style="position: fixed;">
  <div class="tab">
    <h5><a href="#tab-title-0" class="tab-title-active">Binary</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-1" class="tab-title">About</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-2" class="tab-title">Representation</a></h5>
  </div>
</div>

<div class="content">
  <h1 class="tab-title" id="tab-title-0">Binary</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-1">About</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-2">Representation</h1>
  <p>
    <!-- stuff written -->
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

从所有锚标记中删除类tab-title-active，然后将其添加回当前目标

＆＃13;

＆＃13;

$(document).ready(function() {
  $('a').click(function() {
    // removing the class from element which have this class
    $('.tab-title-active').removeClass('tab-title-active');
    // adding it to the selected element
    $(this).addClass('tab-title-active')

  });
});

＆＃13;

.tab-title {
  color: green
}

.tab-title-active {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" style="position: fixed;">
  <div class="tab">
    <h5><a href="#tab-title-0" class="tab-title tab-title-active">Binary</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-1" class="tab-title">About</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-2" class="tab-title">Representation</a></h5>
  </div>
</div>

<div class="content">
  <h1 class="tab-title" id="tab-title-0">Binary</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-1">About</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-2">Representation</h1>
  <p>
    <!-- stuff written -->
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;