的JavaScript元素瞄准

首先，我的JavaScript技能是关于零所以这可能是易peasy :)的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'); 
    }); 
    });

来源

2014-03-02 user3370933

你可能要像

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

其中

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

会向上升，并认为你在.nav-tabs，然后

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

那张downards找到任何.active和删除它们。

来源

2014-03-02 15:07:11 thebjorn

这照顾了选项卡，但由于某种原因毁了脚本的其余部分，因为现在显示/隐藏div功能只适用于第一张幻灯片，但不适用于其他幻灯片... – user3370933

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

正如其他答案所示，。父母也会工作。当我只希望找到一位家长时（虽然速度稍慢一点，IIRC），我更喜欢使用最接近父母的方式。这种情况不太可能，但在这种情况下，父母会使用.nav-tabs类查找所有祖先，因此如果以某种方式嵌套.nav-tabs，您可能会收到意外的行为。

来源

2014-03-02 15:08:01

正如我对thebjorn所述，您的建议都适用于选项卡，但由于某种原因，显示/隐藏功能会停止为所有幻灯片工作，但第一个幻灯片不会工作。我已经添加了更多的html，以更好地理解每张幻灯片的结构。 – user3370933

的JavaScript元素瞄准

回答

相关问题