您好,我正在为我的网站做语言下拉菜单。如您所见,它的效果非常好,但是我遇到的问题是,我不希望index.html一旦选择了另一种语言就可以更换。因此,如果您保存HTML&jQuery,当您第一次加载工具栏时会发生什么
c:/users/[您的名字]/DESKTOP/DROP_DOWN/index.html
但是,如果我将语言切换到法语,例如" index.html"消失并将变成
c:/users/[您的名字]/desktop/drop_down/& locale = fr_fr
我的目标是没有索引。html消失,例如
c:/users/[您的名字]/DESKTOP/DROP_DOWN/index.html&locale = fr_fr
如果有人可以帮助我,那将是很棒的,我只是通过自学自己来学习如何做到这一点。感谢大家!(我也有CSS代码,但我不包括它,因为它是样式表,并且不影响网站的功能)
$(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).on('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('<dl id="target" class="dropdown"></dl>')
$("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
$("#target").append('<dd><ul></ul></dd>')
options.each(function(){
$("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
});
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Website toolbar</title>
<link rel="stylesheet" href="languageswitcher.css">
</head>
<body>
<header>
<div id="country-select">
<form action="server-side-script.php">
<select id="country-options" name="country-options">
<option selected="selected" title="&locale=en_US" value="us">English(US)</option>
<option title="&locale=en_GB" value="gb">English(UK)</option>
<option title="&locale=bg_BG" value="bg">Bulgarian</option>
<option title="&locale=cs_CS" value="cs">Czech</option>
<option title="&locale=da_DK" value="dk">Danish</option>
<option title="&locale=de_DE" value="de">German</option>
<option title="&locale=ek_GR" value="gr">Greek</option>
<option title="&locale=es_ES" value="es">Spanish</option>
<option title="&locale=et_ET" value="et">Estonian</option>
<option title="&locale=fi_FI" value="fi">Finnish</option>
<option title="&locale=fr_FR" value="fr">French</option>
<option title="&locale=hu_HU" value="hu">Hungarian</option>
<option title="&locale=it_IT" value="it">Italian</option>
<option title="&locale=lt_LT" value="lt">Lithuanian</option>
<option title="&locale=lv_LV" value="lv">Latvian</option>
<option title="&locale=nl_NL" value="nl">Dutch</option>
<option title="&locale=no_NO" value="no">Norwegian</option>
<option title="&locale=pl_PL" value="pl">Polish</option>
<option title="&locale=pt_PT" value="pt">Portugese</option>
<option title="&locale=ro_RO" value="ro">Romanian</option>
<option title="&locale=sk_SK" value="sk">Slovak</option>
<option title="&locale=sl_SL" value="sl">Slovenian</option>
<option title="&locale=sv_SE" value="se">Swedish</option>
</select>
<input value="Select" type="submit" />
</form>
</div>
</header>
<script src="jquery_1.5.min.js"></script>
<script src="languageswitcher.js"></script>
</body>
</html>
将 &locale=sl_SL
更改为 ?locale=sl_SL
用?
替换所有&
或使其成为index.html?locale=sv_SE
本质上,查询字符串应以问号开头,而不是一个anmpers。