文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS用类和id隐藏一些文本

问CSS用类和id隐藏一些文本
EN

Stack Overflow用户

提问于 2015-04-01 20:56:54

回答 1查看 3.9K关注 0票数 0

嗨，我试图用CSS制作一个网站，并想知道是否可以根据语言隐藏文本。我们使用asp网站和语言是英语和法语。为了简单的人谁将记录FAQ，我有义务做html(没有模板和DB)。我想做一个CSS代码，它检查languageCode是"EN“还是"FR”，并在没有选择语言的地方放置不可见标记。我可以做Javascript来改变CSS，但是因为我使用CSS来隐藏和显示我的问题--anwser，我想知道我是否可以用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就可以做我想做的事情。

html

css

css-selectors

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-01 22:34:07

您可以尝试使用:lang选择器css。但是，考虑到所有情况，xml等都是很棘手的。我认为检测用户浏览器语言的javascript很简单，所以为什么不基于此设置一个全局类，然后您可以相应地使用css隐藏/显示。您确实需要确保您有一个完整的列表，可能的朗值。

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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29400663

复制

相似问题

问CSS用类和id隐藏一些文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS用类和id隐藏一些文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS用类和id隐藏一些文本
EN