javascript - 点击图片映射时addClass

Question

我有 4 个可点击区域的图像，当我点击其中一个区域时，将链接到幻灯片轮播 Bootstrap 。

我将此代码用于图像映射:

<img src="img/home-top.jpg" class="img-responsive" alt="Responsive image" usemap="#map" />

<map name="map">
  <area shape="rect" coords="15,14,296,608" href="#" /> <!-- slide 1 active -->
  <area shape="rect" coords="334,17,623,613" href="#" /> <!-- slide 2 active -->
  <area shape="rect" coords="659,20,934,607" href="#" /> <!-- slide 3 active -->
  <area shape="rect" coords="978,18,1249,609" href="#" /> <!-- slide 4 active -->
</map>

和幻灯片轮播的代码:

<div class="carousel-inner lg-size">
        <div id="slide-1" class="item">
            <div class="fill" style="background-image:url('img/slide-1.jpg');"></div>
        </div>
        <div id="slide-2" class="item">
            <div class="fill" style="background-image:url('img/slide-2.jpg');"></div>
        </div>
        <div id="slide-3" class="item">
            <div class="fill" style="background-image:url('img/slide-3.jpg');"></div>
        </div>
        <div id="slide-4" class="item">
            <div class="fill" style="background-image:url('img/slide-4.jpg');"></div>
        </div>
</div>

这是我的代码点击功能:

$("area").click(function(){
    $("#slide-1").addClass("active");
});

但这对我不起作用。

Check jsFiddle

Answer 1

尝试下面的代码

$("area").click(function()
{
   index= $(this).index(); //Get index position of current area tag
   ind = parseInt(index)+1; // .index function returns position from 0 so add 1 to current index
   $('.item').removeClass("active"); //Remove class active from slides
   $("#slide-"+ind).addClass("active"); //Add class active to corresponding slide
});