Javascript 元素定位

Question

首先，我的 JavaScript 技能大约为零，所以这可能很简单:)

我有一个包含许多幻灯片的 js 轮播，每张幻灯片都有两个 div，您可以通过单击上面的两个导航选项卡(“查看”和“阅读”)在它们之间进行更改(显示/隐藏)，并且每张幻灯片有这些导航选项卡。除了一个烦人的细节之外，一切都运行良好。每个导航选项卡都有一个动态 js 生成的事件类来指示当前哪个导航选项卡处于事件状态。但当前的脚本同时针对每张幻灯片上的所有导航选项卡，而不仅仅是我当前正在查看的导航选项卡。因此，我只想删除与我单击的其他选项卡位于同一元素内的选项卡的事件类。

这是 html:

<div class="big-container" id="slide1">
<!-- The tabs -->
    <div class="nav-tabs">
        <span class="nav-tab active">
            <a href="#thumbs">View</a>
        </span>
        <span class="nav-tab">
            <a href="#info">Read</a>
        </span>
    </div>
<!-- The div with info text -->                 
    <div class="project-info hide" id="info">
        Here goes some text
    </div>
<!-- The div with images -->
    <div class="img-thumbs" id="thumbs">
        <img src="some-image.png" />
    </div>
</div>

这是脚本:

$(document).ready(function() {
    $('.nav-tab > a').click(function(event){
    event.preventDefault();//stop browser to take action for clicked anchor
 
    //get displaying tab content jQuery selector
    var active_tab_selector = $('span.active > a').attr('href');                    
 
    //find actived navigation and remove 'active' css
    var actived_nav = $('.nav-tabs > span.active');
    actived_nav.removeClass('active');
 
    //add 'active' css into clicked navigation
    $(this).parents('span').addClass('active');
 
    //hide displaying tab content
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hide');
 
    //show target tab content
    var target_tab_selector = $(this).attr('href');
    $(target_tab_selector).removeClass('hide');
    $(target_tab_selector).addClass('active');
     });
  });

Answer 1

你可能想要类似的东西

$(this).parents('.nav-tabs').find('.active').removeClass('active');

哪里

$(this).parents('.nav-tabs')

向上找到您所在的.nav-tabs，然后

.find('.active').removeClass('active');

向下查找任何 .active 并将其删除。