jQuery 国家语言（Language）选择切换的示例。

现在网站不仅是做的国内的，更多的大企业或者是做外贸电子商务的网站都需要面向国际化，因此就涉及到语言的选择，多语言网站建的切换应该怎么设计呢？这里给你一款jQuery 国家语言（Language）选择切换的示例。

  
 
 
  
  
  
 
 
 

 
jQuery 语言切换选择
 
   
     
       United States
       United Kingdom
       France
       Germany
       Netherlands
     
     
   
 

                                

 

jQuery 语言切换选择

                   United States        United Kingdom        France        Germany        Netherlands                  

           

实现的效果如图所示：

为了实现上面的效果除了上面的HTML外，还需要js和css。

languageswitcher.css文件CSS代码

* { margin: 0; padding: 0; }
body {
background: #ccc;
}

header {
display: block;
background: #777;
height: 50px;
position: relative;
min-width: 600px;
}

header h1 {
	font: bold 24px Arial, Helvetica, sans-serif;
	color: #fff;
	position: absolute;
	left: 20px;
	top: 8px;
	}

#country-select {
position: absolute;
top: 13px;
right: 0;
width: 180px;
}

/* rought form styles for when JS is disabled */

#country-select form {
width: 180px;
padding: 0;
}

#country-select select,
#country-select input {
display: inline;
padding: 0;
margin: 0;
}

/* JS-created definition list */

.dropdown dd { position: relative; }

.dropdown a {
text-decoration: none;
outline: 0;
font: 12px Arial, Helvetica, sans-serif;
display: block;
width: 130px;
overflow: hidden;
}

.dropdown dt a {
background: #c45618;
border: 1px solid #964315;
padding: 3px 10px 4px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}

.dropdown dt a.active {
	background: #db5e18;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 1px dotted #676768;
	-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
	box-shadow: 0 3px 7px rgba(0,0,0,.5);
	color: #fff;
	}

.dropdown dd ul {
background: #814f33;
border: 1px solid #676768;
color: #C5C0B0;
display: none;
position: absolute;
z-index: 999;
top: 0;
left: 0;
padding: 2px 0 5px 0;
list-style: none;
border-top: none;
margin: 0;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
box-shadow: 0 3px 7px rgba(0,0,0,.5);
}

.dropdown dd ul li a {
	padding: 2px 10px;
	}

.dropdown dd ul li a span,
.dropdown dt a span {
	float: left;
	width: 16px;
	height: 11px;
	margin: 2px 6px 0 0;
	background-image: url(flags.png);
	background-repeat: no-repeat;
	cursor: pointer;
	}

	.us a span { background-position: 0 0 }
	.uk a span { background-position: -16px 0 }
	.fr a span { background-position: -32px 0 }
	.de a span { background-position: -48px 0 }
	.nl a span { background-position: -64px 0 }

.dropdown dd ul li a em,
.dropdown dt a em {
	font-style: normal;
	float: left;
	width: 100px;
	cursor: pointer;
	}

.dropdown dd ul li a em {
	color: #dbc3b5;
}

.dropdown dd ul li a:hover { background-color: rgba(255,255,255,.1); }
.dropdown dd ul li a:hover em { color: #fff; }margin: 0; padding: 0; }
body {
background: #ccc;
}

header {
display: block;
background: #777;
height: 50px;
position: relative;
min-width: 600px;
}

header h1 {
	font: bold 24px Arial, Helvetica, sans-serif;
	color: #fff;
	position: absolute;
	left: 20px;
	top: 8px;
	}

#country-select {
position: absolute;
top: 13px;
right: 0;
width: 180px;
}

/* rought form styles for when JS is disabled */

#country-select form {
width: 180px;
padding: 0;
}

#country-select select,
#country-select input {
display: inline;
padding: 0;
margin: 0;
}

/* JS-created definition list */

.dropdown dd { position: relative; }

.dropdown a {
text-decoration: none;
outline: 0;
font: 12px Arial, Helvetica, sans-serif;
display: block;
width: 130px;
overflow: hidden;
}

.dropdown dt a {
background: #c45618;
border: 1px solid #964315;
padding: 3px 10px 4px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}

.dropdown dt a.active {
	background: #db5e18;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 1px dotted #676768;
	-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
	box-shadow: 0 3px 7px rgba(0,0,0,.5);
	color: #fff;
	}

.dropdown dd ul {
background: #814f33;
border: 1px solid #676768;
color: #C5C0B0;
display: none;
position: absolute;
z-index: 999;
top: 0;
left: 0;
padding: 2px 0 5px 0;
list-style: none;
border-top: none;
margin: 0;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
box-shadow: 0 3px 7px rgba(0,0,0,.5);
}

.dropdown dd ul li a {
	padding: 2px 10px;
	}

.dropdown dd ul li a span,
.dropdown dt a span {
	float: left;
	width: 16px;
	height: 11px;
	margin: 2px 6px 0 0;
	background-image: url(flags.png);
	background-repeat: no-repeat;
	cursor: pointer;
	}

	.us a span { background-position: 0 0 }
	.uk a span { background-position: -16px 0 }
	.fr a span { background-position: -32px 0 }
	.de a span { background-position: -48px 0 }
	.nl a span { background-position: -64px 0 }

.dropdown dd ul li a em,
.dropdown dt a em {
	font-style: normal;
	float: left;
	width: 100px;
	cursor: pointer;
	}

.dropdown dd ul li a em {
	color: #dbc3b5;
}

.dropdown dd ul li a:hover { background-color: rgba(255,255,255,.1); }
.dropdown dd ul li a:hover em { color: #fff; }

languageswitcher.js文件JS代码

$(document).ready(function() {
 
 	// --- language dropdown --- //
 
 	// turn select into dl
 	createDropDown();
 	
 	var $dropTrigger = $(".dropdown dt a");
 	var $languageList = $(".dropdown dd ul");
 	
 	// open and close list when button is clicked
 	$dropTrigger.toggle(function() {
 		$languageList.slideDown(200);
 		$dropTrigger.addClass("active");
 	}, function() {
 		$languageList.slideUp(200);
 		$(this).removeAttr("class");
 	});
 
 	// close list when anywhere else on the screen is clicked
 	$(document).bind('click', function(e) {
 		var $clicked = $(e.target);
 		if (! $clicked.parents().hasClass("dropdown"))
 			$languageList.slideUp(200);
 			$dropTrigger.removeAttr("class");
 	});
 
 	// when a language is clicked, make the selection and then hide the list
 	$(".dropdown dd ul li a").click(function() {
 		var clickedValue = $(this).parent().attr("class");
 		var clickedTitle = $(this).find("em").html();
 		$("#target dt").removeClass().addClass(clickedValue);
 		$("#target dt em").html(clickedTitle);
 		$languageList.hide();
 		$dropTrigger.removeAttr("class");
 	});
 });
 
 	// actual function to transform select to definition list
 	function createDropDown(){
 		var $form = $("div#country-select form");
 		$form.hide();
 		var source = $("#country-options");
 		source.removeAttr("autocomplete");
 		var selected = source.find("option:selected");
 		var options = $("option", source);
 		$("#country-select").append('')
 		$("#target").append('' + selected.text() + '')
 		$("#target").append('
')
 		options.each(function(){
 			$("#target dd ul").append('' + $(this).text() + '');
 			});
 	}document).ready(function() {
 
 	// --- language dropdown --- //
 
 	// turn select into dl
 	createDropDown();
 	
 	var $dropTrigger = $(".dropdown dt a");
 	var $languageList = $(".dropdown dd ul");
 	
 	// open and close list when button is clicked
 	$dropTrigger.toggle(function() {
 		$languageList.slideDown(200);
 		$dropTrigger.addClass("active");
 	}, function() {
 		$languageList.slideUp(200);
 		$(this).removeAttr("class");
 	});
 
 	// close list when anywhere else on the screen is clicked
 	$(document).bind('click', function(e) {
 		var $clicked = $(e.target);
 		if (! $clicked.parents().hasClass("dropdown"))
 			$languageList.slideUp(200);
 			$dropTrigger.removeAttr("class");
 	});
 
 	// when a language is clicked, make the selection and then hide the list
 	$(".dropdown dd ul li a").click(function() {
 		var clickedValue = $(this).parent().attr("class");
 		var clickedTitle = $(this).find("em").html();
 		$("#target dt").removeClass().addClass(clickedValue);
 		$("#target dt em").html(clickedTitle);
 		$languageList.hide();
 		$dropTrigger.removeAttr("class");
 	});
 });
 
 	// actual function to transform select to definition list
 	function createDropDown(){
 		var $form = $("div#country-select form");
 		$form.hide();
 		var source = $("#country-options");
 		source.removeAttr("autocomplete");
 		var selected = source.find("option:selected");
 		var options = $("option", source);
 		$("#country-select").append('')
 		$("#target").append('' + selected.text() + '')
 		$("#target").append('
')
 		options.each(function(){
 			$("#target dd ul").append('' + $(this).text() + '');
 			});
 	}

css 需要的图片资源

这里的css只是参考，可以根据自己的选择设计来。以上是关于jQuery的语言（Language）选择的实现方法。这里给出完整的下载包，点此下载 jQuery的语言（Language）选择包示例