简体   繁体   中英

Display specific divs or content based on browser language?

I'm creating a pretty simple site of maybe 4 pages, that I want to be available in English, French, and Portuguese.

The usual approach is to keep the languages separate (one HTML file per language for example) and send the content back in the language they want. You could try to parse the Accept-Language header<\/a> and send back the closest match; you'd probably want to include a language selection widget of some sort as well.

  • <\/li>
  • <\/li>
  • <\/li><\/ul>

    For example, if you have this HTML:


Start with this:

var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;
userLang = substr(1,2);

Then set <body class="userLang"> , which I leave up to you as I don't want to assume you are using a specific javascript library or framework. Next up you can use CSS to show, hide, or do what ever you want on you divs. For example if fr is your default:

#footer_fr { display: block; }
#footer_pt { display: none; }
#footer_en { display: none; }
body.pt #footer_en { display: none; }
body.pt #footer_fr { display: none; }
body.pt #footer_pt { display: block; }

I'm not sure the above is perfect CSS, but you get the idea.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM