-->

HTML - 使用element.lang改变语言(html - change language

2019-07-04 05:21发布

堆栈的第一个问题,因此华友世纪给我! 我试图开发一种新的方式(显然,因为我已经看到没有办法解决这个网上,也许因为这一切是不可能的)改变使用JS和郎财产HTML编写元素的语言。

基本上,我已经创建了多个标签,在他们每个人的财产郎,因此,给予一定的朗 - 无显示值,隐藏它,-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>

周围的英文文本标签,并用自己的财产郎任何其他语言一样。 我曾尝试使用:

$("#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';
};

哪个更优雅,更快速的方式。

演示: http://jsfiddle.net/Gw4eQ/


使用:not选择器,使其具有更多语言。 演示

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


Answer 2:

你有没有关闭“点击”用)?

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


Answer 3:

这是不正确的:

$('a:lang(en)').attr('display', 'inherit');
$('a:lang(it)').attr('display', 'none');

没有属性“显示”,而是使用:

$('a:lang(en)').css('display', 'inherit');
$('a:lang(it)').css('display', 'none');

或者干脆:

$('a:lang(en)').show();
$('a:lang(it)').hide();

......但你也有此错误,你没有正确包装您的功能:

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

应该是: });

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

此外,我会使用inline ,而不是inherit 。 “继承”并不意味着“默认”,意思是“继承父这个属性”,这将可能是block<a>的默认显示是inline



文章来源: html - change language using element.lang