JavaScript/CSS Custom Tabs

I have some custom navigation tabs that when clicked, reveal relevant content. They are created by HTML, CSS & JavaScript.
The only thing that I need to accomplish with these tabs now, is to have
the first tab: <li class=”tab-link current” data-tab=”tab-1″><a> News</a></li> to be the only one showing
when the page loads.

Here are the three pieces of code:

HTML

[code]<ul class=”tabs nav nav-pills nav-justified”>
<li class=”tab-link current” data-tab=”tab-1″><a> News</a></li>
<li class=”tab-link” data-tab=”tab-2″><a>Industry News</a></li>
<li class=”tab-link” data-tab=”tab-3″><a>Events</a></li>
<li class=”tab-link” data-tab=”tab-4″><a>New Documents</a></li>
</ul>[/code]

Css

[code]/*
1.Add following css to Page Settings:
.tab-content{
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
2. Add custom css classes “tab-content tab-1 current” to first row.
Add custom css classes “tab-content tab-2” to following row etc.
*/
#@{uniqueId} {
font-family: Lato, ‘Segoe UI’, ‘Helvetica Neue’, sans-serif;
font-weight: lighter;
text-align: center;
color: @color;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
cursor: pointer;
vertical-align: middle;
&:hover{background: #ededed;}
a{
color: rgb(238, 36, 137);
font-family: ‘Raleway’, sans-serif;
font-size: 20px;
font-weight: bold;
}
a:hover{background-color: transparent;}
}
ul.tabs li.current{
//background: #ededed;
color: #222;
border-bottom: 4px solid rgb(62, 194, 154);
a{
color:rgb(0,190,33);
}
}[/code]

JavaScript

[code]$(‘ul.tabs li’).click(function(){
var tab_id = $(this).attr(‘data-tab’);
$(‘ul.tabs li’).removeClass(‘current’);
$(‘.tab-content’).removeClass(‘current’);
$(this).addClass(‘current’);
$(“.”+tab_id).addClass(‘current’);
})[/code]

I’m trying to get the first “News” tab to open only on page load.
Any help would be greatly appreciated.

**Edited by site staff: Inserted code tags**

Also in #JavaScript _↴