在我的下拉菜单中,我不希望整个扩展程序在网址上发生更改?

时间:2016-06-22 15:07:45

标签: javascript jquery html

您好我正在为我的网站制作语言下拉菜单。它可以完美地运行,但我遇到的问题是,一旦我选择了不同的语言,我不希望更换index.html。所以如果你保存HTML& JQuery,第一次加载工具栏时会发生什么

C:/ Users / [您的名字] /Desktop/Drop_Down/index.html

但是,如果我将语言切换为法语,例如" index.html"消失,将变成

C:/ Users / [您的名字] /桌面/ Drop_Down /& locale = fr_FR

我的目标是试图瞄准的是没有让index.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>');
  });
}
&#13;
<!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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

&locale=sl_SL更改为?locale=sl_SL

将所有&替换为?或将其设为index.html?locale=sv_SE

基本上,查询字符串应以问号开头,而不是以&符号开头。