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，并在第一个元素之后创建二级列表，然后替换 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 更改为德语，然后隐藏德国国旗的第二个实例。

于 2013-01-31T21:30:27.773 回答