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');

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

Javascript元素定位

2 个答案: