如何通过URL参数/哈希值结合jQuery自动设置语言下拉选项，实现页面加载时切换对应语言区块

Got it, let's fix this up while keeping your existing functionality intact! We'll add logic to detect the language from either the URL hash (like #german) or query parameter (like ?german), then auto-select that language on page load. Here's how to do it step by step:

Step 1: Add a Function to Extract Language from URL #

First, create a helper function to pull the valid language value from the URL. It checks both hash and query parameters, then falls back to your default (English) if no valid language is found:

// Helper to get language from URL (hash or query param)
function getLanguageFromUrl() {
  // Check URL hash first (e.g. example.com/page/#german)
  const hashLanguage = window.location.hash.slice(1).toLowerCase();
  const validLanguages = ['english', 'german', 'spanish', 'french'];
  
  if (validLanguages.includes(hashLanguage)) {
    return hashLanguage;
  }

  // Check query parameters (e.g. example.com/page/?german)
  const urlParams = new URLSearchParams(window.location.search);
  for (const param of urlParams.keys()) {
    const lowerParam = param.toLowerCase();
    if (validLanguages.includes(lowerParam)) {
      return lowerParam;
    }
  }

  // Fallback to default language if no match
  return 'english';
}

Step 2: Update Your jQuery Logic #

Now, integrate this helper with your existing code. We'll tweak your handler to be reusable (so it works both on page load and manual dropdown changes) and add initialization logic:

$(document).ready(function() {
  // Shorter version of your hide function
  const hideAllDivs = function() {
    $("#English, #French, #German, #Spanish").hide();
  };

  // Reusable selection handler (works for auto-init and manual changes)
  const handleNewSelection = function(selectedLanguage) {
    hideAllDivs();
    // Use passed language (for auto-init) or dropdown value (for manual switch)
    const lang = selectedLanguage || $(this).val();
    
    switch(lang) {
      case 'english':
        $("#English").show();
        break;
      case 'french':
        $("#French").show();
        break;
      case 'german':
        $("#German").show();
        break;
      case 'spanish':
        $("#Spanish").show();
        break;
    }

    // Optional: Update URL hash when manually switching (so refresh keeps language)
    window.location.hash = lang;
  };

  // Keep your manual dropdown functionality
  $("#language_selector").on('change', handleNewSelection);

  // Auto-select language on page load
  const initialLang = getLanguageFromUrl();
  // Set dropdown to the detected language
  $("#language_selector").val(initialLang);
  // Trigger the content switch
  handleNewSelection(initialLang);
});

How It Works #

1. URL Detection: The getLanguageFromUrl function first checks if the URL has a valid hash (like #german). If not, it scans query parameters for a valid language key (like ?german). If neither exists, it defaults to English.
2. Reusable Handler: We modified handleNewSelection to accept an optional language parameter, so it can be triggered both by the dropdown's change event (using $(this).val()) and by our auto-init logic (passing the detected language directly).
3. No Breaking Changes: Your original manual dropdown functionality stays fully intact—users can still switch languages via the select menu, and we even added an optional touch to update the URL hash when they do, so refreshing the page keeps their selected language.

Verify Your HTML #

Your existing HTML is already good, but just double-check that the option values match the language strings we're using (they do: german, english, etc.), and that your content div IDs match the case in the jQuery code (#German for the German content, etc.).

<select id="language_selector">
  <option value="german">Deutsch</option>
  <option value="english" selected>English</option>
  <option value="spanish">Español</option>
  <option value="french">Français</option>
</select>

内容的提问来源于stack exchange，提问作者J.K.