I'm building a personal one-page HTML template with different sections like about me, resume, portfolio, etc.
The theme is using a navigation structure as followed:
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#About">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Resume">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact</a>
</li>
</ul>
Needless to say, on each click on the menu items, the page moves to the respective section in the current document.
However, I decided to create a separate HTML file for blog posts named single-post.html which uses the exact same structure for navigation.
So, what I wanted to do next, was to redirect the user back to index.html and move them to the selected section when they clicked on any menu item. In other words, if the user is viewing single-post.html and clicks on <a class="nav-link" href="#Resume">Resume</a> they are moved to index.html or the main page of the theme, and immediately to the resume section.
This is how I tried to do that using the trigger() in jQuery:
$('.single .nav-link').click(function(event){
event.preventDefault();
var pageID = $(this).attr('href').split('#');
var selectedPage = pageID[1];
window.location.href = 'index.html';
$('.nav-link[href="#'+ selectedPage +'"]').trigger('click');
});
Note: The class single is assigned to <body> of the single-post.html.
The code redirects the user to the index file eventually, but that selected section will not have active status.
I appreciate some help on this.
question from:
https://stackoverflow.com/questions/65849064/setting-active-section-after-redirect-with-jquery 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
