您好我正在尝试使用CSS创建一个网站,并想知道是否可以根据语言隐藏文本。我们使用asp网站,语言是英语和法语。为了简化记录FAQ的人员,我不得不做html(没有模板和数据库)。我想做一个CSS代码,它检查languageCode是否是" EN"或" FR"并将不可见标签放在未选择语言的位置。我可以用Javascript来改变CSS但是因为我使用CSS来隐藏和显示我的问题 - 我想知道我是否可以只用CSS做到这一点。 这里是模板的样本,我想要的信息以及我想在之后应用css的位置。:
<div>
<div>
<div>
<div class="languageCode" id="fr" style="display: none; visibility: hidden;">fr</div>
</div>
</div>
</div>
<div class="MainContent">
<div>
<h1>FAQ</h1>
<label><input type="checkbox" id="language" />Français ?</label>
<ul class="collapse-list">
<li class="fr">
<label class="collapse-btn" for="question-1">
Titre FR1
</label>
<input class="collapse-open" type="radio" id="question-1" name="question" aria-hidden="true" hidden="hidden"/>
<div class="collapse-panel">
<div class="collapse-inner">
<p>
texte
</p>
</div>
</div>
</li>
<li class="en">
<label class="collapse-btn" for="question-2">
Title EN1
</label>
<input class="collapse-open" type="radio" id="question-2" name="question" aria-hidden="true" hidden="hidden"/>
<div class="collapse-panel">
<div class="collapse-inner">
<p>
text
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
这里是CSS的一小部分
.collapse-open
{
display: none;
}
.collapse-panel
{
display: none;
margin-left: 10px;
}
.collapse-open:checked ~ .collapse-panel
{
display: block;
}
这里是我想要做的部分,但我不能说如何让它发挥作用
#fr.languageCode ~ .fr{
visibility: hidden;
display: none;
}
#fr.languageCode ~ .en{
visibility: visible;
}
#en.languageCode ~ .fr{
visibility: visible;
}
#en.languageCode ~ .en{
visibility: hidden;
display: none;
}
如果ID为#fr,则仅显示法语内容,如果ID为#en,则仅显示英语内容。 注意:我知道我的CSS中的选择器不起作用,但我无法找到我应该使用的内容,或者它是否可以在没有javascript的情况下执行我想要的操作。
答案 0 :(得分:2)
您可以尝试使用:lang selector css。但是,考虑到所有情况,xml lang等可能会很棘手。我认为用于检测用户浏览器语言的javascript很简单,那么为什么不设置基于该的全局类,然后你可以用css隐藏/显示因此。您需要确保获得可能的lang值的完整列表。
var language = window.navigator.userLanguage || window.navigator.language;
alert(language);
document.getElementById('content').className = language;
div {
visibility: hidden;
}
#content.fr .french {
visibility: visible;
}
#content.en-US .english {
visibility: visible;
}
#content.sp .spanish {
visibility: visible;
}
<div id="content" class="default">
<div class="french">Si votre navigateur préférence lang est francais , vous devriez voir cette
</div>
<div class="english">If your browser lang preference is ENGLISH you should see this
</div>
<div class="spanish">Si su navegador lang preferencia es espanol debería ver esto
</div>
</div>