Javascript 元素定位

Question

首先，我的 javascript 技能几乎为零，所以这可能很容易：)

我有一个带有许多幻灯片的 js 轮播，每张幻灯片都有两个 div，您可以通过单击上面的两个导航选项卡（“查看”和“阅读”）和每张幻灯片在（显示/隐藏）之间进行更改有这些导航标签。除了一个烦人的细节外，一切都很好。每个 nav-tab 都有一个动态的 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 并删除它们。

Answer 2

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

正如另一个答案所表明的那样， .parents 也可以。当我只希望找到一个父母时，我稍微喜欢使用最接近的父母（即使它有点慢，IIRC）。在你的情况下不太可能，但在这种情况下，父母会寻找所有具有 .nav-tabs 类的祖先，所以如果你以某种方式嵌套了 .nav-tabs，你可能会得到意想不到的行为。