Question

我想触发选定的link有4个属性href执行onclick功能。我希望将类激活添加到被选中的类，任何人都可以帮助我解决这个问题

<ul class="graph_menu">
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(<?php echo $companies['id'] ?>, '-1 month', 'Pkr');">1 M</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(<?php echo $companies['id'] ?>, '-3 months', 'Pkr');">3 M</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(<?php echo $companies['id'] ?>, '-6 months', 'Pkr');">6 M</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(<?php echo $companies['id'] ?>, '-1 year', 'Pkr');">1 Y</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(<?php echo $companies['id'] ?>, '-3 years', 'Pkr');">3 Y</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(<?php echo $companies['id'] ?>, 'all', 'Pkr');">Max</a></li>
</ul>

这是我创建的功能

function getCompanyRatesGraph(val, timeFrame, gd_type) {
    $(this).removeClass('.active');
    $(this).addClass('.active');
    $('.load_dt_grph').show();
}

Answer 1

使用$(".grph_btn").removeClass("active");从所有按钮中删除活动。

同时从('.active')

中删除点

您还需要在onclick事件中添加this。因为你的功能不知道this是什么

function getCompanyRatesGraph(val, timeFrame, gd_type, obj) {
  $(".grph_btn").removeClass("active");
  $(obj).addClass('active');
}

.active {
  color: blue;
  font-size: 20px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="graph_menu">
  <li><a class="grph_btn" onclick="getCompanyRatesGraph('', '-1 month', 'Pkr', this);">1 M</a></li>
  <li><a class="grph_btn" onclick="getCompanyRatesGraph('', '-3 months', 'Pkr', this);">3 M</a></li>
  <li><a class="grph_btn" onclick="getCompanyRatesGraph('', '-6 months', 'Pkr', this);">6 M</a></li>
  <li><a class="grph_btn" onclick="getCompanyRatesGraph('', '-1 year', 'Pkr', this);">1 Y</a></li>
  <li><a class="grph_btn" onclick="getCompanyRatesGraph('', '-3 years', 'Pkr', this);">3 Y</a></li>
  <li><a class="grph_btn" onclick="getCompanyRatesGraph('', 'all', 'Pkr', this);">Max</a></li>
</ul>

Answer 2

function getCompanyRatesGraph(ele, val, timeFrame, gd_type) {
    $('.grph_btn').removeClass('active');
    $(ele).addClass('active');
    $('.load_dt_grph').show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="graph_menu">
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(this, 1, '-1 month', 'Pkr');">1 M</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(this, 2, '-3 months', 'Pkr');">3 M</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(this, 3, '-6 months', 'Pkr');">6 M</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(this, 4, '-1 year', 'Pkr');">1 Y</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(this, 5, '-3 years', 'Pkr');">3 Y</a></li>
    <li><a class="grph_btn" onclick="getCompanyRatesGraph(this, 6, 'all', 'Pkr');">Max</a></li>
</ul>

Answer 3

你也可以使用toggleclass： -

http://api.jquery.com/toggleclass/

Answer 4

香草溶液：

this.classList.add('active')

this.classList.remove('active')

Answer 5

删除任何活动类的一个巧妙方法是搜索该类并将其从自身中删除。而不是

$('.grph_btn').removeClass('active');

您可以使用

$('.active').removeClass('active');

然后到函数

$('.grph_btn').onClick(function(){
  $('.active').removeClass('active');
  $(this).addClass('active');
});

添加类并从所选按钮中删除类

5 个答案: