Jquery点击内容切换问题：点击对应链接仅显示目标内容

Hey there! I see your current jQuery code loads content but ends up showing everything at once. Let's tweak it to make sure clicking .content-board only displays the matching div, and clicking .content-listing hides the board content first before showing the listing.

Updated jQuery Code #

$(document).ready(function(){
    // Optional: Hide one content block by default if you want an initial state
    // $('.content-board').hide();

    // Target only the relevant links to avoid affecting other <a> tags on your page
    $("a.content-board, a.content-listing").click(function(e) {
        e.preventDefault();
        const targetClass = $(this).attr('class');
        const $output = $('#output');

        // First, hide all existing content blocks in the output area
        $output.find('.content-board, .content-listing').hide();

        // Check if the target content is already loaded to avoid redundant requests
        const $targetContent = $output.find(`.${targetClass}`);
        if ($targetContent.length === 0) {
            // Load the new content from the file, then show it
            $output.load(`includes/listing.html .${targetClass}`, function() {
                $(this).find(`.${targetClass}`).show();
            });
        } else {
            // Content is already there, just show it
            $targetContent.show();
        }
    });
});

What This Does #

• Targeted Click Binding: Instead of attaching the click event to all <a> tags, we only target the ones with your specific classes (content-board and content-listing). This prevents unintended behavior with other links on your page.
• Hide Existing Content: Before showing anything new, we hide both content blocks in the #output container. This ensures only the clicked content is visible.
• Avoid Redundant Loads: We check if the target content is already loaded in the output. If it is, we just show it instead of reloading the file—this speeds things up for repeat clicks.
• Keep preventDefault(): We keep this to stop the link from triggering a page refresh, which would make your loaded content disappear instantly.

Bonus Optimization #

If your includes/listing.html has both content blocks, consider splitting them into separate files (like board.html and listing.html). This way, you only load the exact content you need, making the code even cleaner:

$(document).ready(function(){
    $("a.content-board").click(function(e) {
        e.preventDefault();
        $('#output').find('.content-listing').hide();
        $('#output').load("includes/board.html .content-board", function() {
            $(this).find('.content-board').show();
        });
    });

    $("a.content-listing").click(function(e) {
        e.preventDefault();
        $('#output').find('.content-board').hide();
        $('#output').load("includes/listing.html .content-listing", function() {
            $(this).find('.content-listing').show();
        });
    });
});

This approach cuts down on unnecessary data transfer and makes each link's purpose more explicit.

内容的提问来源于stack exchange，提问作者SAJJADH A.W