Quick Launch selected item (which get bold font weight) is being wrongly determined

Question

I have a team site inside my SharePoint on-premises farm 2013, inside the team site i added a custom list which contain 3 content types. Now when i create a new items inside the custom list, i will get different urls based on the content type, as follow:-

/Lists/Management/NewForm.aspx?ContentTypeId=111&RootFolder=/Management/Lists/Management

/Lists/Management/NewForm.aspx?ContentTypeId=222&RootFolder=/Management/Lists/Management

/Lists/Management/NewForm.aspx?ContentTypeId=333&RootFolder=/Management/Lists/Management

Then to ease the process on end users, i add 3 links inside my Quick Launch links, each link will have different ContentTypeIdinside its URL. But the problem i am facing is that regardless of the link i click on , the last link will always get bold font weight, and this is confusing users .. For example, if they click to create an item which have ContentTypeId=111, the link which get selected will be the last one with 'ContentTypeId=333'.. so i am not sure if there is a way i can fix this layout issue?

Here is how my quick launch links look like, where the last link is being selected (url = /Lists/Management/NewForm.aspx?ContentTypeId=333&RootFolder=/Management/Lists/Management) although i clicked on the first link (url = /Lists/Management/NewForm.aspx?ContentTypeId=111&RootFolder=/Management/Lists/Management)..

Answer 1

While configuring the quick launch URLs add a new query string parameter at the end which has the text of the displayed link on quick launch. For example,

/Lists/Management/NewForm.aspx?ContentTypeId=111&RootFolder=/Management/Lists/Management&ct=New Order

Edit the NewForm.aspx page (or master page) and add the below javascript to the page. Remove the jquery reference if you already have one. Modify the code per your requirements

<script  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
var queryString = GetUrlKeyValue('ct');//SharePoint provides this method to get query string value
if(queryString != ''){
$("#sideNavBox span.menu-item-text").each(function(o,i){ 
    if(i.innerText === queryString){ 
$('#sideNavBox a.selected').removeClass('ms-bold');
        $('#sideNavBox a.ms-core-listMenu-selected').removeClass('ms-core-listMenu-selected'); //remove current selected link css
$(this).parent().parent().addClass('ms-bold');
        $(this).parent().parent().addClass('ms-core-listMenu-selected'); //add the selected css to the correct link
        return;
    } 
});
}
});
</script>

Answer 2

This is as per the design.

By default, links in quick launch does not accept query string parameters. when applying the 'selected' style it matches only the url component without parameters.

So all your links will be defaulted to "/Lists/Management/NewForm.aspx" when applying the style and last navigation item will be selected.

As a workaround you can put a script in your masterpage to remove current "selected" style and apply a new style by matching current url and quicklaunch url.