html - 使用element.lang更改语言

Question

关于堆栈的第一个问题,请欢呼!我正在尝试开发一种新方法(显然,因为我在网上找不到任何解决方案,也许这是不可能的),使用JS和lang属性来改变HTML编写元素的语言.

基本上,我已经在每个标签中创建了多个带有lang属性的标签,因此为某个lang提供-none-的显示值,隐藏它,并使用-inherit-值来显示它.以这种方式,使用线:

a:lang(en),p:lang(en) { display : none }
a:lang(it),p:lang(it) { display : inherit }

我一次可以看到一种语言.这有效!

现在,我创造了一个

<a href="" lang="en" id="en"> word </a>

英文文本周围的标记,以及具有自己的lang属性的任何其他语言.我试过用:

$("#en").click(function(){
           $('a:lang(en)').css('display', 'inherit');
           $('a:lang(it)').css('display', 'none');
           };

哪个似乎不起作用.

有任何想法吗？

谢谢一堆,谢伊

Answer 1

加载页面时会附带一个<body class="it">,并且所有:lang(en)标记都将被隐藏.

body.en :lang(it) {
  display: none;
}
body.it :lang(en) {
  display: none;
}

而当你需要更改语言,只需更改className的<body>.

$("#en").click(function(){
  document.body.className = 'en';
};

哪个更优雅,速度更快.

使用:not选择器使其适用于更多语言.演示

body:not(.en) :lang(en), 
body:not(.it) :lang(it), 
body:not(.fr) :lang(fr) { 
    display: none; 
}