html - change language using element.lang

Question 1

When load your page come with a <body class="it">, and all the :lang(en) tags will be hidden.

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

And when you need to change the language, simply change the className of <body>.

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

Which is more elegant, and way faster.

demo: http://jsfiddle.net/Gw4eQ/

Use :not selector to make it work with more languages. demo

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

Question 2

Have you close 'click' with ) ?

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

Question 3

This is incorrect:

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

There is no attribute "display", instead use:

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

Or simply:

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

...but you also have an error here where you didn't wrap your function correctly:

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

Should be: });

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

Also, I'd use inline rather than inherit. "inherit" does not mean "default", it means "inherit this property from the parent", which will probably be block. <a>'s default display is inline.