根據頁面更改css下拉菜單的頂部項目

我有一個相當簡單的所有css/html下拉菜單，顯示鏈接到語言版本化頁面的國家/地區標誌。現在它是靜態的。我想更改它，以便您所在頁面的標誌出現在菜單的頂部。我似乎無法弄清楚我該如何實現這一目標。我想我會需要一些JS或jQuery？根據頁面更改css下拉菜單的頂部項目

的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>

我如何能使用此代碼交換了基於網頁的頂部圖像的工作有什麼建議？或者你會建議我從頭開始重建？任何提示讚賞。

來源

2013-01-31 Peachy

我最後加入少許腳本，只是換出IMG SRC並刪除了美國國旗的語言網頁：

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

每張圖片都具有一流的，像.USA - 這個腳本改變的SRC美國國旗與德國人，然後隱藏德國國旗的第二個例子。

來源

2013-01-31 21:30:27 Peachy

理想情況下，這將在服務器端完成，而不是在客戶端完成。如果您正在提供靜態文件，則應考慮更改代碼庫以反映每個單獨文件上的更改。如果您使用模板，我會處理頁面檢測並重新排序。現在說，如果你正在尋找客戶端，JS是需要的

您可以使用window.location.href來檢測您所在的頁面。從那裏，你將得到「l_drop」DIV，然後重寫該特定頁面的UL。沒有實際編碼它。

您可以擁有代表標誌屬性集合的ARRAY或JSON。您可以根據需要將正確的項目移動到數組的開頭，然後調用通過循環數組來重寫UL的函數，並在第一個元素之後創建輔助列表，然後替換l_drop DIV ID中的HTML。

來源

2013-01-31 20:10:43

感謝您的建議 - 我走了一個不同的方向，但得到了一個工作解決方案。 – Peachy

根據頁面更改css下拉菜單的頂部項目

回答

相關問題