纯CSS实现无刷新切换语言，解决页面初始无DIV显示问题

Great question! Let's break this down step by step to fix the initial load visibility issue and add browser language detection with PHP, all while keeping the no-refresh switching intact.

Pure CSS Solution (Static Default Language) #

Your original CSS hides all .expand elements by default, only showing the targeted one. To get a default div to display on page load, we’ll adjust the styles to prioritize a "default" state when no target is active.

Step 1: Update Your HTML #

Add a default class to the language div you want to show first (e.g., English):

<a href="#en">English</a>
<a href="#de">Deutsch</a>

<div id="en" class="expand default">English content goes here...</div>
<div id="de" class="expand">Deutsch content goes here...</div>

Step 2: Adjust the CSS #

Modify your styles to show the default div when no target is selected, and override that when a target is clicked:

/* Hide all language blocks by default */
.expand {
    display: none;
}

/* Show the default block when NO element is targeted */
.expand.default:not(:target) {
    display: block;
}

/* Show the targeted block when it's selected */
.expand:target {
    display: block;
}

This works because the :target selector has higher specificity than .default:not(:target), so clicking a link immediately switches to the targeted content, while the default shows on initial load.

Dynamic Default with PHP (Browser Language Detection) #

To make the initial language match the user’s browser settings, we can use PHP to dynamically assign the default class based on the browser’s language header.

Step 1: PHP Language Detection Logic #

Add this at the top of your PHP file to detect the browser’s preferred language:

// Extract the first two characters of the browser's language header
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);

// Define your supported languages
$supported_langs = ['en', 'de', 'fr'];

// Set default language (fallback to English if unsupported)
$default_lang = in_array($lang, $supported_langs) ? $lang : 'en';

Step 2: Dynamic HTML Output #

Use PHP to add the default class to the matching language div:

<a href="#en">English</a>
<a href="#de">Deutsch</a>
<a href="#fr">Français</a>

<div id="en" class="expand <?php echo $default_lang === 'en' ? 'default' : ''; ?>">
    Welcome to our website!
</div>
<div id="de" class="expand <?php echo $default_lang === 'de' ? 'default' : ''; ?>">
    Willkommen auf unserer Website!
</div>
<div id="fr" class="expand <?php echo $default_lang === 'fr' ? 'default' : ''; ?>">
    Bienvenue sur notre site web !
</div>

Step 3: Reuse the CSS from the Pure CSS Solution #

The same CSS from earlier works perfectly here—PHP just dynamically assigns which div gets the default class, so the initial load automatically matches the user’s browser language preference.

This setup keeps the smooth no-refresh switching behavior while solving the initial load visibility issue, and adds a user-friendly touch by respecting browser language settings.

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