Pankaj Morajkar Pankaj Morajkar - 3 months ago 6
Javascript Question

If else in Javascript

I have the following tabs on my page.

<div>
if ("New Joinees" in user.groups) {
<ul class="tabs">
<li class="tab-link tab1" datatab="tab-1">'Business System
Functionality'</li>
<li class="tab-link tab2" datatab="tab-2">'Product'</li>
<li class="tab-link tab3" datatab="tab-3">'Environment
Administration'</li>
<li class="tab-link tab4" datatab="tab-4">'Training'</li>
<li class="tab-link tab5" datatab="tab-5">'Release Notes'</li>
<li class="tab-link tab11" datatab="tab-11">'Regulatory Compliance
Board'</li>
</ul>
}
else if ("RCB" in user.groups){
<ul class="tabs">
<li class="tab-link tab5" datatab="tab-5">'Release Notes'</li>
<li class="tab-link tab11" datatab="tab-11">'Regulatory Compliance
Board'</li>
<li class="tab-link tab12" datatab="tab-12">'Product Management'</li>
</ul>
}
else {
<ul class="tabs">
<li class="tab-link tab1" datatab="tab-1">'Business System
Functionality'</li>
<li class="tab-link tab2" datatab="tab-2">'Product'</li>
<li class="tab-link tab3" datatab="tab-3">'Environment
Administration'</li>
<li class="tab-link tab4" datatab="tab-4">'Training'</li>
<li class="tab-link tab5" datatab="tab-5">'Release Notes'</li>
<li class="tab-link tab6" datatab="tab-6">'Architecture'</li>
<li class="tab-link tab7" datatab="tab-7">'Testing'</li>
<li class="tab-link tab8" datatab="tab-8">'System Administration'</li>
<li class="tab-link tab9" datatab="tab-9">'Site Management'</li>
<li class="tab-link tab10" datatab="tab-10">'Staging'</li>
<li class="tab-link tab11" datatab="tab-11">'Regulatory Compliance
Board'</li>
<li class="tab-link tab12" datatab="tab-12">'Product Management'</li>
</ul>
}
</div>


I have the following Javascript.

$(document).ready(function() {
/* Apply current on Page load */
$('.tab5').addClass('current');
$('.tab-content').css("border-top", "5px solid #3399CC");
$('#tab-5').addClass('current');

$('ul.tabs li').click(function() {

var contentid = '#' + $(this).attr('datatab');

$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');

$(this).addClass('current');
$(contentid).addClass('current').css("border-top", "5px solid " +
$(this).css("background-color"));
});

});


I want to use an if else statement in Javascript to reflect the following:

If user is RCB, the tab to highlighted by default should be Release Notes.

If user is New Joinees, the tab to highlighted by default should be Business System Functionality.

For any other user, the tab to be highlighted should be Business System Functionality.

Any help would be appreciated.

Answer

Below code will set the first tab as current for all 3 types of users.

$(document).ready(function() {
  /* Apply current on Page load */
  var $current = $('ul.tabs li:first-child');
  $current.addClass('current');
  $('.tab-content').css("border-top", "5px solid #3399CC");
  $('#' + $current.attr('datatab')).addClass('current');

  $('ul.tabs li').click(function() {
    var contentid = '#' + $(this).attr('datatab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $(contentid).addClass('current').css("border-top", "5px solid " + $(this).css("background-color"));
  });

});