Question

我有几张标签，每张标签都有一张图片。我可以通过点击它上面的相应点或下面的图像来切换标签。

这里的问题是，当我通过点击点切换标签时，相应的点将突出显示，但是在点击图像切换标签时我无法突出显示相应的点。

关注HTML

<section class="main">
<section class="tabsblock">
    <div class="wrap">
        <div class="tab">
            <ul class="tabs clearfix">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
            <!-- tabs -->
            <div class="box visible">
                <div class="box-text">
                     <h3>TAB ====== 1</h3>

                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.</p>
                </div>
                <img id="tab_1" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" />
            </div>
            <!-- box -->
            <div class="box">
                <div class="box-text">
                     <h3>TAB ====== 2</h3>

                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.</p>
                </div>
                <img id="tab_2" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" />
            </div>
            <!-- box -->
            <div class="box">
                <div class="box-text">
                     <h3>TAB ====== 3</h3>

                    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.</p>
                </div>
                <img id="tab_3" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" />
            </div>
            <!-- box -->
        </div>
        <!-- tab -->
    </div>
    <!-- wrap -->
</section>
<!-- -->

和JS

$('.tabs').delegate('li:not(.active)', 'click', function () {
    $('.tabs').delegate('li:not(.active)','click',function(){$(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq($(this).index()).fadeIn(250);
});
document.getElementById('tab_1').addEventListener('click', function () {  
   $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(1).fadeIn(250);  
});
document.getElementById('tab_2').addEventListener('click', function () {  
   $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(2).fadeIn(250);  
});
document.getElementById('tab_3').addEventListener('click', function () {  
   $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(0).fadeIn(250);  
});

以下fiddle证明了这个问题。

Answer 1

由于您为每个图像使用单独的事件处理程序，您可以在每个图像的相应单击处理程序中使用以下脚本

$('.tabs li').removeClass('active').eq(1).addClass('active');
---------------------------------------^ index of the tab to be displayed.

Updated Fiddle

如何在单击其中的图像时突出显示相应的选项卡

1 个答案: