Question

我正在尝试使用图像映射和jquery来显示/隐藏div。

我需要在点击图像地图时显示一个div并隐藏其余div并隐藏当前div如果单击另一个图像地图以显示另一个div等等!!

我有以下代码，只有在点击图像地图时才会显示div但是如果单击了其他图像地图则不会隐藏它或(display:none;)。

    <script type="text/javascript">
//<![CDATA[
    $("#vid_1").hide();
    $("#vid_2").hide();

    $("map#Map").click(function(ev){
    var target = $(ev.target);
    var targetId = target.attr('id');
    if(targetId == 'vid_One') {
      $("#vid_1").show();
    }
    });



    $("map#Map").click(function(ev){
    var target = $(ev.target);
    var targetId = target.attr('id');
    if(targetId == 'vid_Tow') {
      $("#vid_2").show();
    }
    });
    //]]>
    </script>

我不想在点击每个图像地图后使用$("#vid_2").show();或$("#vid_1").show();等等，因为我将拥有如此多的图像地图，这会让它变得复杂！

有人可以帮我解决这个问题吗？

由于

编辑：

<div align="center" id="wrapper">
  <div id="content">
    <div id="remote">
      <img src="images/remote.png" alt="remote" width="400"
      height="681" usemap="#Map" border="0" /> <map name="Map"
      id="Map">
        <area item="menu_apps" id="vid_One" shape="circle"
        coords="68,139,32" href="#" />
        <area item="menu_apps" id="vid_Tow" shape="circle"
        coords="159,141,32" href="#" />
      </map>
    </div>
    <div id="videoContainer">
      <div id="vid_1">
        1
      </div>
      <div id="vid_2">
        2
      </div>
    </div>
  </div>
</div>

Answer 1

试试这个：

HTML部分：

 <map name="Map"
  id="Map">
    <area data-goto="vid_1" item="menu_apps" id="vid_One" shape="circle"
    coords="68,139,32" href="#" />
    <area data-goto="vid_2" item="menu_apps" id="vid_Tow" shape="circle"
    coords="159,141,32" href="#" />
  </map>

JS：

$("#Map area").click(function(){
  $("#videoContainer div").hide();
  $("#" + $(this).data("goto")).show();
});

代码应隐藏#videoContainer中的所有div元素。然后使用区域元素

中的data-goto值显示带有id的div

Answer 2

您一直面临这个问题，因为您只显示一个div但没有隐藏其他div。

使用css类说.show和.hide。你需要为一个div使用show class，它将显示和隐藏其他div的类，这些div将被隐藏。并且您需要确保一次只有一个div显示类。

尝试这样：

 $("map#Map").click(function(ev){
        var target = $(ev.target);
        var targetId = target.attr('id');
        if(targetId == 'vid_One') {
          $(".show").removeClass("show").addClass('hide'); // remove previous div show class and hide it
          $("#vid_1").removeClass('hide').addClass("show");// remove previous div hide class and show it
        }
        });

让我知道你是否有任何困惑：）

Answer 3

尝试用以下代码替换所有代码：

$("#videoContainer div").hide();

$("map#Map").click(function(ev){
    var target = $(ev.target),
        areaIndex = target.index('area');

    $("#videoContainer div:eq(" +  areaIndex + ")").hide().siblings().show();
});

显示一个div并使用jquery隐藏其他div？

3 个答案: