j-query hyperlink on li

For Online paath download  file link below :-

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

HTML

<div class="socail">

<ul>  

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

CSS

.socail {

float: right;

margin: 0px;

padding: 0px;

}

.socail ul {

margin: 0px;

padding: 0px;

list-style: none;

text-decoration: none;

}

.socail li {

cursor: pointer;

float: left;

padding: 5px 10px;

}

.socail li:nth-child(1):before {

font-family: FontAwesome;

content: "\f09a";

display: inline-block;

vertical-align: middle;

color: #fff;

-moz-transition: all 300ms ease;

-webkit-transition: all 300ms ease;

-ms-transition: all 300ms ease;

-o-transition: all 300ms ease;

transition: all 300ms ease;

}

.socail li:hover:nth-child(1):before {

color: #6779A7

}

.socail li:nth-child(2):before {

font-family: FontAwesome;

content: "\f099";

display: inline-block;

vertical-align: middle;

color: #fff;

-moz-transition: all 300ms ease;

-webkit-transition: all 300ms ease;

-ms-transition: all 300ms ease;

-o-transition: all 300ms ease;

transition: all 300ms ease;

}

.socail li:hover:nth-child(2):before {

color: #79CDF2

}

.socail li:nth-child(3):before {

font-family: FontAwesome;

content: "\f0e1";

display: inline-block;

vertical-align: middle;

color: #fff;

-moz-transition: all 300ms ease;

-webkit-transition: all 300ms ease;

-ms-transition: all 300ms ease;

-o-transition: all 300ms ease;

transition: all 300ms ease;

}

.socail li:hover:nth-child(3):before {

color: #015fa7

}

.socail li:nth-child(4):before {

font-family: FontAwesome;

content: "\f0d5";

display: inline-block;

vertical-align: middle;

color: #fff;

-moz-transition: all 300ms ease;

-webkit-transition: all 300ms ease;

-ms-transition: all 300ms ease;

-o-transition: all 300ms ease;

transition: all 300ms ease;

}

.socail li:hover:nth-child(4):before {

color: #c83d26

}

.socail li:nth-child(5):before {

font-family: FontAwesome;

content: "\f16a";

display: inline-block;

vertical-align: middle;

color: #fff;

-moz-transition: all 300ms ease;

-webkit-transition: all 300ms ease;

-ms-transition: all 300ms ease;

-o-transition: all 300ms ease;

transition: all 300ms ease;

}

.socail li:hover:nth-child(5):before {

color: #ed1b24

}

JS 

<script type="text/javascript">

      $(document).ready(function(e) {
   
//social networking icons code start
$('.socail ul li').click(function(){
//alert($(this).index());
var index=$(this).index();
var win = null;
if(index==0){
    win = window.open('https://www.facebook.com/HumanResourceRecruiters/', '_blank');
}
else if(index==1){
win=window.open('https://twitter.com/NimbusHire', '_blank');
}
else if(index==2){
win=window.open('https://www.linkedin.com/in/nimbus-hire-55b9b5150', '_blank');
}
else if(index==3){
win=window.open('https://plus.google.com/u/0/104347536629844376463', '_blank');
}
else if(index==4){
win=window.open('https://www.youtube.com/channel/UCS_qwVsAWsKCp1UjbPDyrsg', '_blank');
}
else if (index == 5) {
    win = window.open('http://localhost:51094/Admin/AdminLogin.aspx', '_blank');
}

if (win) {
//Browser has allowed it to be opened
win.focus();
} else {
//Browser has blocked it
alert('Please allow popups for this website');
}
});
    
  })
</script>