Question

Please check my code,

CSS

.ulData li.sel {
    background:#fff !important;
    font-size:0.8em;
    font-weight:bold;
}

JS

function switchTab(typ){
    $(".ulData li").removeClass("sel");
    $("#"+typ).addClass("sel");
    $("."+ typ +"Options").addClass("sel");
}

HTML

<ul class="ulData">
  //For Loop li
  <li title="${option.id}" id="${option.key}"><span>aaaa</span></li>
</ul>

If I click on a button, I call switchTab function. In there I am adding the ‘sel’ class.
If I am adding like,

$("li#"+typ).addClass("sel");

Then working in Firefox but non of the IE versions. please help how to apply the CSS for all the browser compatibilities.

Thanks in advance

Answer 1

If your id has dots, you have to escape them
(I know they may be template engine ids, but just in case)

$("#${option.key}") will not work
$("#${option\\.key}") will work

So, to ensure dot-escping do:

function switchTab(typ){
  typ = typ.replace(/\./g, "\\\\.");
  //... Your normal code
}

EDIT You’re missing the $(document).ready() when calling to switchTab(). You should have:

$(document).ready(function(){
    switchTab('companySection');
});

I’ve edited your fiddle http://jsfiddle.net/XyyWf/2/

Hope this helps. Cheers