CODEWITHSUNDEEP
javascriptjquery
Usman Khan
Usman Khan

Reputation: 179

add class and remove class from selected button

I want to trigger the selected link there are 4 attributes href which performs onclick function. I want to add class active to the one which is selected can anyone help me out with this concern 

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

This is the function I have created

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

Upvotes: 0

Views: 1402

Answers (5)

scottdurban
scottdurban

Reputation: 508

A neat trick to remove any active class is to search for that class and remove it from itself. So instead of 

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

You can use

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

Then on to the function 

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

Upvotes: 0

JazzBrotha
JazzBrotha

Reputation: 1748

Vanilla solution:

this.classList.add('active')

this.classList.remove('active')

Upvotes: 0

Hassan Imam
Hassan Imam

Reputation: 22524

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>

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

use $(".grph_btn").removeClass("active"); to remove active from all the buttons.

Also remove the dot from ('.active')

Also you need to add this to your onclick event. because your function dont know what this is

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>

Upvotes: 4

user6166492
user6166492

Reputation:

You can also use toggleclass :-

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

Upvotes: 0

Related Questions