html多国语言配置方法,jquery多国语言切换特效

这是一款实现多国语言切换的jquery特效。在这个示例中，通过简单的js代码，实现包括中文和英文在内的7种不同国家语言的切换效果。

使用方法

在页面中引入jquery和style.css。

HTML结构

示例中，整个页面分为两个部分，一部分是选择语言的下拉列表框，另外一部分是显示文字的区域。

EN

简体中文

English (US)

Deutsch

Español

Français

Português (BR)

العربية (SA)

Link

JavaScript

实现多国语言切换的js代码页非常简单，各国语言的标题，内容等被存放在一个数组中。

var trans = [

{

en : 'Chameleon',

pt : 'Camaleão',

es : 'Camaleón',

fr : 'Caméléon',

de : 'Chamäleon',

cn : '变色龙',

ar : 'حرباء'

},{

en : 'For sheer breadth of freakish ......',

pt : 'Por uma infinidade de caract......',

es : 'Por pura amplitud de extrañas......',

fr: "Pour l'ampleur pure des caract......",

de: 'Wegen der schieren Breite der......',

cn: '由于极其奇特的解剖特征，变色......',

ar : 'لمجرد اتساع الميزات التشريحية فظيع، ......'

},{

en : 'See More',

pt : 'Saiba mais',

es : 'Más información',

fr : 'En savoir plus',

de : 'Weitere Infos',

cn : '查看更多',

ar : 'مشاهدة المزيد'

},

];

实现翻译的是translate()函数，它通过数组下标来查找相应的语言。

translate(tnum);

function translate(tnum){

$('h1#title').text(trans[0][tnum]);

$('p').text(trans[1][tnum]);

$('.content a span').text(trans[2][tnum]);

}

然后在点击下拉框中的选项时，通过获取data-value的值来得到当前用户选择了什么语言，然后再通过translate()函数将文字转换为相应的语言。

$('.more_lang .lang').click(function(){

$(this).addClass('selected').siblings().removeClass('selected');

$('.more_lang').removeClass('active');

var img = $(this).find('img').attr('src');

var lang = $(this).attr('data-value');

var tnum = lang;

translate(tnum);

$('.current_lang .lang-txt').text(lang);

$('.current_lang img').attr('src', img);

if(lang == 'ar'){

$('body').attr('dir', 'rtl');

}else{

$('body').attr('dir', 'ltr');

}

});

});