添加班级并从选定的按钮中删除班级

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')

还需要添加this到您的onclick事件删除点。因为你的函数不知道什么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'); 
});