2017-06-30 103 views
0

我想觸發所選的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(); 
} 
+2

'$( 「grph_btn 」)。removeClass(「 活動」)',和你('.active')''中的'.',應該是'('active')' –

+0

它將活動類添加到所有href中,類名相同 –

+0

Usman你是什麼意思? –

回答

4

使用$(".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>

+0

現在它不是刪除或添加類 –

+0

運行我的代碼並再次檢查,確保你寫了一切正確 –

+0

@UsmanKhan另外,請注意,你必須添加''Pkr',這個'到你的onclick事件。並且在你的函數中必須是'getCompanyRatesGraph(val,timeFrame,gd_type,obj)'。然後'$(obj).addClass('active');' –

0

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>

+0

您提供的代碼不起作用 –

+0

@UsmanKhan您可以看到hassan和我的答案在您運行代碼段時工作正常,請確保你根據我們的回答正確地編寫了你的​​html,如果是的話,告訴我們什麼是不工作的。你也可以包含你的「新」html和jQuery代碼 –

+0

是啊對不起,現在我通過檢查元素 –

0

香草溶液:

this.classList.add('active')

this.classList.remove('active')

0

甲巧妙的方法,以除去任何活性類是要搜索的類和從自身中取出。因此,而不是

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

您可以使用

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

再到功能

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