0

我有一个带有交互式美国地图的页面。每个状态都是基于数据库设置可互换的图像（它不是一个大图像和/或图像映射）。我还有一个无序列表（项目绝对位于其相应状态之上）设置为可点击元素以更改 div 的内容。div 包含自己的 div 中的所有内容；显示哪个 div 基于具有“活动”类。脚本和标记可以在这里查看：https ://gist.github.com/3239999

由于 png 图像的重叠，图像本身不能可靠地成为可点击元素，但我希望状态在可能的情况下引导链接。

要点中的代码适用于任何地方，但在新英格兰/东海岸地区的小州的 IE 中除外。我可以通过一些 z-index 工作来解决它，但它并非完美无缺。在某些情况下，您仍然必须单击正确的位置（这不是很明显）。

我愿意为 IE 使用不同的脚本，但我似乎无法将其更改为仅使用 li 作为指示器并在 IE 中工作。我试过这个没有成功：

<script type="text/javascript">
    $(document).ready(function() {
        switchers = $('#switchers > li');
        states = $('#state_info > div');
        switchers.each(function(idx) {
            $(this).data('state', states.eq(idx));
        }).click(function() {
             switchers.removeClass('active');
             states.removeClass('active');             
             $("#_" + $(this).attr('id')).addClass('active');  
             $("#_" + $(this).attr('id')).data('state').addClass('active');
        });
    });
</script>

我不像我想的那样精通jquery，尤其是解决跨浏览器问题。

任何人都可以帮助我更好地工作吗？

你可以在这里看到最有效的版本：http ://www.envisiondemo.com/lookout/state-and-federal-i-9-compliance/

实际站点是实时的，但我正在使用演示服务器进行测试。我已经将 li 的样式设置为在 IE 中具有红色边框，这可以帮助您查看问题区域的位置。似乎最糟糕的是西弗吉尼亚州和弗吉尼亚州。由于他们从一个角度相互拥抱，我无法更改 z-index 来修复它。一个总是会过度重叠另一个。

4

1 回答 1

0

除了考虑将其切换到 SVG 之外（我承认这可能有点极端，因为看起来你已经走得很远了，我可以推荐以下内容：

使用单个背景图像，这样您就可以避免绝对定位所有状态的图像。因此，不要使用以下代码：

<div id="states">
    <img />
    <img />
</div>

<ul id="switchers">
    <li></li>
    <li></li>
</ul>

你可以：

<ul id="states">
    <li></li>
    <li></li>
</ul>

并用 设置地图background-url。最后，我实际上会将状态名称添加到li元素中，而不是将它们放在图像中。这使您可以在悬停时突出显示。

您的脚本可以改进如下：

http://jsfiddle.net/radu/4bVcd/

$(document).ready(function() {
    var $switchers = $('#switchers li'),
        $states = $('#state_info div');

    $switchers.click(function() {
        $switchers.removeClass('active');
        $states.removeClass('active');
        $(this).addClass('active');
        $('#_' + this.id).addClass('active');
    });
});

在您的脚本中switchers，并且states是隐式全局变量，因为该var语句不存在。我为我的 jQuery 对象添加前缀，$但这只是个人喜好。

在您的代码中，您通过 jQuery's链接state_info到，但我不确定您是否正确使用它，并且每次点击都会引发错误。switchers.data()

至于您对 IE6 的问题，我建议可能将 WV 或 VA 与其他东海岸州一起移出。即使在可以正常工作的浏览器中，也很难将其挑选出来。为了进一步提高可用性，您可以执行我之前提到的操作，并以某种方式在悬停时突出显示状态名称。您可以更改颜色，增加大小，添加阴影.. 无论如何，只要用户清楚正在选择哪个状态。​</p>

于 2012-08-07T17:36:58.003 回答