Question

Hi i have following ul li that display categories name:

<ul>
<li class="selected" data-tab-id="0"></li>
<li data-tab-id="12">...</li>
<li data-tab-id="3">...</li>
<li data-tab-id="15">...</li>
<li data-tab-id="7">...</li>
</ul>

The javascript scripts as follow:

<script type="text/javascript">
var cat_id = '<?=$this->catid?>'

$(document).ready(function () {

});
</script>

Currently the page at index so first li data-tab-id="0" will be selected class also var cat_id will be return nothing. Now when user navigate to another tab such as data-tab-id="12", var cat_id will be return value of 12, how can i remove class selected from default li and replace it to data-tab-id="12". Thanks

Answer 1

use addClass() and removeClass() to add and remove class respectively.
try this

updated

var cat_id = '<?=$this->catid?>';
$('li').removeClass('selected'); 
 $('li').each(function(){
   if($(this).attr('data-tab-id')==cat_id){
    $(this).addClass('selected'); 
  }
})

updated without using loop..

var cat_id = '<?=$this->catid?>';
$('li').removeClass('selected');
$('li[data-tab-id='+cat_id+']').addClass('selected');

fiddle here

updated fiddle