Question

我用jQuery创建了一个函数，当在div中单击链接时，应该向div中添加“ active”类。 “活动”类将链接更改为不同的CSS样式（粗体，不同颜色的文本）

问题是链接没有被添加一个活动类，因此CSS样式没有改变

$(document).ready(function() {
  $('.subnav_links a').click(function() {
    $(this).addClass('active');
    $(this).addClass('active').siblings().removeClass('active');
  });
});

.subnav_links a {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #000;
}

.subnav_links a.active {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #FFF;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="subnav_links">
  <a href="#" class="active">Home</a>
  <a href="#" class="">Safety</a>
</div>

Answer 1

其功能实际上正在起作用，唯一的问题是它将字体设置为白色

$(document).ready(function() {
  $('.subnav_links a').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

.subnav_links a {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #000;
}

.subnav_links a.active {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #6A8B4C;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="subnav_links">
  <a href="#" class="active">Home</a>
  <a href="#" class="">Safety</a>
</div>

Answer 2

这是两个问题的更新代码，首先是活动内容上的锚点颜色，而动态内容上的click事件。

请检查：-

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="subnav_links">
  <a href="#" class="active">Home</a>
  <a href="#" class="">Safety</a>
</div>

<script>
$(document).on('click', '.subnav_links a', function() {
    $(this).addClass('active').siblings().removeClass('active');
});
</script>

<style>
.subnav_links a {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #000;
}
.subnav_links a.active {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #888;
  font-weight: bold;
}
</style>

Answer 3

希望可以帮助您

$(document).ready(function() {
   $('.subnav_links a').click(function() {
       $('.subnav_links a').removeClass('active');
       $(this).addClass('active);
   });
});

Answer 4

您的代码已正确运行。唯一的问题是白色（#FFF）中的文本，这就是为什么在添加活动类之后该文本不会显示为背景也是白色的原因。如果要使文本保持白色，请考虑将background-color添加到active类中。

$(document).ready(function() {
  $('.subnav_links a').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

.subnav_links a {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #000;
}

.subnav_links a.active {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #FFF;
  font-weight: bold;
  background-color:#000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="subnav_links">
  <a href="#" class="active">Home</a>
  <a href="#" class="">Safety</a>
</div>

Answer 5

代码已经可以使用了。我只是在活动类样式中更改了color: blue;。

$(document).ready(function() {
  $('.subnav_links a').click(function() {
    $(this).addClass('active');
    $(this).addClass('active').siblings().removeClass('active');
  });
});

.subnav_links a {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #000;
}

.subnav_links a.active {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: blue;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="subnav_links">
  <a href="#" class="active">Home</a>
  <a href="#" class="">Safety</a>
</div>

jQuery单击时未向div添加“活动”类

5 个答案: