为什么我的两种语言样式表都出现在页面加载中,而不仅仅是默认的? [英] Why do both of my language stylesheets appear on page load rather than just the default one?

查看:18
本文介绍了为什么我的两种语言样式表都出现在页面加载中,而不仅仅是默认的?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想做一个支持两种不同语言的网站.我制作了两个样式表并添加了一些在按钮被点击时会切换的代码:

I want to make a website which supports two different languages. I made two stylesheets and added some code that will switch when the buttons are clicked:

<html>
<head>
<style type="text/css">
    body.fr :lang(en) {
      display: none;
    }
    body.en :lang(fr) {
      display: none;
    }
</style>
</head>
<body>
    <button onclick="document.body.className='en'">English</button>
    <button onclick="document.body.className='fr'">French</button>
    <p lang="en">This is English</p>
    <p lang="fr">This is French</p>
</body>
</html>

问题在于,当页面加载时,所有样式表都会出现.我只想出现一个样式表;默认为英文.

The problem is that, when the page is loaded, all stylesheets appear. I want only one stylesheet appear; the default one is English.

推荐答案

尝试向 body 标签添加默认语言,而不仅仅是您想要使用不同语言的元素:

Try adding a default language to the body tag rather than just the elements you want to be in different languages:

body.fr > p[lang=en] {
display: none;
}
body.en > p[lang=fr] {
display: none;
}

<html>
<body class="en">
    <button onclick="document.body.className='en'">English</button>
    <button onclick="document.body.className='fr'">French</button>
    <p lang="en">This is English</p>
    <p lang="fr">This is French</p>
</body>
</html>

这篇关于为什么我的两种语言样式表都出现在页面加载中,而不仅仅是默认的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆