根据页面更改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下拉菜单的顶部项目

回答

相关问题