0

リストから作成された選択プルダウンがあります。選択して移動をクリックすると、フォームはジャンプメニュー形式でリダイレクトされます。問題のプルダウンは実際にはWordPressのメインメニューですが、これらの目的では、それは問題ではない場合があります。

<nav class="widget">
   <ul id="odm-13-widget" class="menu">
      <li id="menu-item-122" class="menu-item-122"><a href="http://www.ex1.com">English</a></li>
      <li id="menu-item-120" class="menu-item-120"><a href="http://www.ex2.com/">United Kingdom</a></li>
      <li id="menu-item-123" class="menu-item-123"><a href="http://www.ex3.com/">France</a></li>
   </ul>
</nav>

ジャンプは機能します。必要なのは、onChangeで変更するためのプルダウンの左側にある対応する画像です。

<div id="langflagcontainer"><img id="langflag" class="flags" src="flag_us.gif" /></div>

フラグはflag_us.gifで始まりますが、英国またはmenu-item-120 onChangeを選択すると、flag_uk.gifに変わります。フランスの次のオプションはflag_fr.gifです。

値とオプションを含む選択リストを使用するが、ul要素とli要素を含むリストを使用しないSOの例を見つけました。

前述のように、私はWordPressウィジェットを使用しています。これは最適化されたドローンダウンメニューであり、liに値属性を追加できるかどうかわかりません。

ありがとう。

4

1 に答える 1

1

jQueryこれを達成するために使用できます

ダウンロード、またはリンク:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

ライブラリをページに追加し、タグjQueryの直前に次のコードを追加します。</body>

<script type="text/javascript">
    $("#odm-13-widget").parent("nav").onChange(function(){
        var country = $(this).val();
        switch(country){
            case 'English': country = "us"; break;
            case 'United Kingdom': country = "uk"; break;
            case 'France': country = "fr"; break;
        }
        $("#langflag").attr("src","flag_"+country+".gif");
    });
</script>
于 2013-01-09T18:44:54.317 に答える