1

言語バージョンのページにリンクする国旗を表示する、かなり単純なすべての css/html ドロップダウン メニューがあります。現在は静的です。現在表示しているページのフラグがメニューの上部に表示されるように変更したいと思います。どうすればこれを達成できるかわかりません。JSまたはjqueryが必要になると思いますか？

CSS:

#l_drop{background: #4D8986;height: 24px;width: 52px;border: 1px #62b7b4 solid; float:left; margin: 6px 0 0 7px;}
#l_drop ul{background: #4D8986;list-style: none;margin: 0;padding: 0;}
#l_drop li{float: left;position:relative;}
#l_drop a{display: block;float: left;height: 24px;line-height: 24px;padding: 0;text-decoration: none;}
#l_drop ul ul{display:none;position: absolute;top: 24px;left: -1px;width: auto;margin-top: -1px;border: 1px #62b7b4 solid;border-top: 0;}
#l_drop ul ul li{width:52px;}
#l_drop ul li:hover > ul {display: block;}

HTML:

<div id="l_drop">
<ul>
<li><a href="#"><img src="english.gif" width="52" height="24" alt="English" border="0" /></a>
<ul>
<li><a href="#"><img src="spanish.png" width="24" height="24" alt="Español" border="0" /></a></li>
<li><a href="#"><img src="french.png" width="24" height="24" alt="Français" border="0" /></a></li>
<li><a href="#"><img src="german.png" width="24" height="24" alt="Deutsch" border="0" /></a></li>
<li><a href="#"><img src="korean.png" width="24" height="24" alt="한국의" border="0" /></a></li>
<li><a href="#"><img src="chinese.png" width="24" height="24" alt="中国的" border="0" /></a></li>
<li><a href="#"><img src="japanese.png" width="24" height="24" alt="日本人" border="0" /></a></li>
</ul>
</li>
</ul>
</div>

ページに基づいてトップの画像を入れ替えるこのコードの使用方法に関する提案はありますか? それとも、ゼロから再構築することをお勧めしますか? ヒントをいただければ幸いです。

4

2 に答える 2

1

これは、クライアントではなくサーバー側で行うのが理想的です。静的ファイルを提供している場合は、個々のファイルに変更を反映するようにコードベースを変更することを検討する必要があります。テンプレートを使用している場合は、ページの検出と並べ替えをそのように処理します。そうは言っても、クライアント側でそれを行う場合は、JSが必要です

window.location.href を使用して、現在のページを検出できます。そこから、「l_drop」DIV を取得し、その特定のページの UL を書き直します。実際にコーディングせずに。

フラグ属性のコレクションを表す ARRAY または JSON を使用できます。必要に応じて正しい項目を配列の先頭に移動し、配列をループして UL を書き換える関数を呼び出し、最初の要素の後に 2 次リストを作成してから、l_drop DIV ID 内の HTML を置き換えることができます。

于 2013-01-31T20:10:43.737 に答える
0

言語ページに小さなスクリプトを追加して、img SRC を交換し、USA フラグを削除しました。

$(function () {
    $("img.USA").attr('src', '/german.png');    $(".lang_flagDE").attr('class', 'hideFlag'); });

各画像には、.USA などのクラスがあります。このスクリプトは、米国国旗の SRC をドイツ国旗に変更し、ドイツ国旗の 2 番目のインスタンスを非表示にします。

于 2013-01-31T21:30:27.773 に答える