如何在单击其中的图像时突出显示相应的选项卡[关闭]答案

【问题标题】：How to highlight the respective tab on clicking an image in it [closed]如何在单击其中的图像时突出显示相应的选项卡[关闭]
【发布时间】：2014-07-13 17:17:22
【问题描述】：

我有几个标签，每个标签都有一张图片。我可以通过单击其上方的相应点或下图来切换选项卡。

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

遵循 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 演示问题。

【问题讨论】：

请在问题中包含您代码的相关部分，谢谢。
链接小提琴包含代码
我知道。这就是为什么我说“在问题中包含代码的相关部分”。

标签： javascript jquery html css

【解决方案1】：

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

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

Updated Fiddle

【讨论】：

Muchas Gracias Tilwin，非常感谢您的时间和精力。