点击页脚链接跳转页面并激活对应导航的实现指导

The core issue with your current code is that it uses e.preventDefault() which stops the browser from navigating to the target page. To activate the tab on the new page, you need to pass the tab identifier via the URL hash and handle it when the target page loads. Here's how to fix it:

Step 1: Correct Footer Link URLs #

Ensure your footer links point to the target page with the tab hash included. For example:

<a href="/portfolio#logo-design" class="footer-top-2 ul.portfolio-footerList li a">Logo Design</a>
<a href="/portfolio#branding" class="footer-top-2 ul.portfolio-footerList li a">Branding</a>

Step 2: Remove the Existing Click Handler #

Your current code blocks navigation entirely. Delete this code snippet since we no longer need to prevent the default link behavior:

// Remove this entire block
$(document).on('click', '.footer-top-2 ul.portfolio-footerList li a', function(e) {
    // ... existing code ...
});

Step 3: Add Tab Activation Logic to the Target Page #

On the portfolio page (the page you're navigating to), add this jQuery code to activate the correct tab when the page loads:

$(document).ready(function() {
    // Extract the tab identifier from the URL hash
    var activeTab = window.location.hash.slice(1);
    
    if (activeTab) {
        // Reset all tabs and panes to inactive state
        $(".portfolio-2-tabs .nav-tabs li a").removeClass("active");
        $(".portfolio-2-tabs .tab-pane").removeClass("active");
        
        // Activate the matching tab and content pane
        $("#" + activeTab + "-link").addClass("active");
        $("#" + activeTab).addClass("active");
        
        // Scroll to the portfolio section (optional)
        $('html, body').animate({
            scrollTop: $('#portfolio-sec-2').offset().top - 50
        }, 'slow');
    }
});

Key Checks to Verify #

• Confirm that your tab link IDs match the hash values (e.g., hash logo-design corresponds to tab link ID logo-design-link).
• Ensure jQuery is loaded before this code runs on the target page.
• Test clicking the footer links: the URL should include the hash, and the correct tab should activate on page load.

内容的提问来源于stack exchange，提问作者Wajeeh Shaikh