That is actually very simple to accomplish, and based on what you mentioned in 2 comments of yours in your other post, where you reload the page for each link and the url's looks like in the sample "oneplus" link, e.g. "https://www.oneplus.com/support", it can be set with just 1 line of script.
By simply detect when the page is loaded (.ready()), you grab the current window.location and use its pathname property.
Combined with the attribute selector attribute="value", you can then add a class to your link, which is the recommended way, and here is how it can look in your code
$( document ).ready(function() {
$('.link-leftbar[href$="' + window.location.pathname + '"]').addClass('active');
});
In the above I used the ending with ($) selector [attr$="value"], but there are more variants if your url gets more complex, and you can check them out at this link Attribute selectors.
Since this function gets called every time page load, it will work for a page refresh too.
If you would start using e.g. Ajax to load the content, by simply execute this line, it will set your active link.
$('.link-leftbar[href$="' + window.location.pathname + '"]').addClass('active');
Here is a sample, where I manually set the url, and also show how to alter the inline CSS, if you for any reason can't use a class.
Also note, as it is invalid to have a li wrapped in any other element but being a child of an ul, I changed the ul/li to div/span in below sample, and added additional styling so the links are stack vertically and have bullets.
Stack snippet
var window_location = new URL("http://www.test.com/support/international");
$(document).ready(function() {
// using a class, recommended
$('.link-leftbar[href$="' + window_location.pathname + '"]').addClass('active');
// change inline CSS, if you can't use classes
$('.link-leftbar[href$="' + window_location.pathname + '"]').css('color', 'darkblue');
});
.active {
font-weight: bold;
}
/* additional styling - */
.link-leftbar span { /* - stack links vertically */
display: block;
}
.link-leftbar span::before { /* - add a bullet to each */
content: '•';
padding: 0 10px 0 25px;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="section group">
<div class="left-nav col span_1_of_2_">
<h2 class="leftnav-title">Support</h2>
<div>
<a class="link-leftbar" href="www.test.com/support/manuals">
<span>Manuals</span>
</a>
<a class="link-leftbar" href="www.test.com/support/international">
<span>International</span>
</a>
<a class="link-leftbar" href="www.test.com/support/tracking">
<span>Tracking</span>
</a>
<a class="link-leftbar" href="www.test.com/support/contacts">
<span>Contacts</span>
</a>
<a class="link-leftbar" href="www.test.com/support/security">
<span>Security</span>
</a>
<a class="link-leftbar" href="www.test.com/support/registration">
<span>Registration</span>
</a>
<a class="link-leftbar" href="www.test.com/support/policy">
<span>Policy</span>
</a>
<a class="link-leftbar" href="www.test.com/support/troubleshooting">
<span>Troubleshooting</span>
</a>
<a class="link-leftbar" href="www.test.com/support/promotions">
<span>Promotions</span>
</a>
<a class="link-leftbar" href="www.test.com/support/shipping">
<span>Shipping</span>
</a>
<a class="link-leftbar" href="www.test.com/support/terms">
<span>Terms</span>
</a>
<a class="link-leftbar" href="www.test.com/support/claim">
<span>Claim</span>
</a>
</div>
</div>
</div>
</div>
