使当前div更改相关菜单选项卡为活动 [英] Make current div change relevant menu tab to active

问题描述

在我的移动项目中，我可以按菜单选项卡（Tab2），该选项卡变为活动（活动类的背景颜色）和下面相应的div（Div2）将出现在屏幕上。
如果我按另一个选项卡，那个选项卡将变为活动状态。 div等...总之，工作完美！

但现在我有相反的问题，我想按（在我的情况下，刷卡）屏幕，并使上面相应的选项卡处于活动状态（使用颜色）。例如在屏幕上的Div1中滑动，Tab1应处于活动状态并具有某种背景颜色。在Div2中滑动，然后Tab2应该是活动的，但是不能让它工作。

以下是我的li标签：

 < ul class = nav nav-pills mobileNavbar> 
< li onclick =swipeFunction（0）class =col-xs-4 tab1data-index =0>< a href =＃> STREAM< / a> ; / li> 
< li onclick =swipeFunction（1）class =col-xs-4 tab2data-index =1>< a href =＃> CHAT< / a> ; / li> 
< li onclick =swipeFunction（2）class =col-xs-4 tab3data-index =2>< a href =＃> IDE< / a> ; / li> 
< / ul> 
  

和我的jQuery：

  $（'＃carousel-example-generic'）。on（'slid.bs.carousel'，function（）{
 
 var savedIndex = $（this）.find （'.active'）。index（）; 
 
 if（savedIndex === 0）{
 //我想让Tab1在这里激活
} else if（savedIndex == 1）{
 //我想让Tab2在这里活动
} else if（savedIndex == 2）{
 //我想让Tab3在这里活动
} 
}）; 
  

有关我正在尝试构建的更多细节， libs，images（and my previous problem，solve byPieter）：

解决方案

p>正如我上面所说，你在所有的条件下做同样的事情。所有您需要做的是，通过索引您从旋转木马激活导航项目。尝试：

  $（'＃carousel-example-generic'）。on（'slid.bs.carousel'，function （）{
 
 var savedIndex = $（this）.find（'。active'）。index（）; 
 
 $（'。nav-pill> li：eq （'+ savedIndex +'）> a'）。css（'background'，'yellow'）; 
}）; 
  

编辑：

我建议使用CSS类，而不是内联css。尝试：

  $（'＃carousel-example-generic'）。on（'slid.bs.carousel'，function （）{
 
 var savedIndex = $（this）.find（'。active'）。index（）; 
 
 $（'。nav-pill> li：eq （'+ savedIndex +'）> a'）
 .addClass（active）//将活动类添加到当前一个
 .parent（）。siblings（）// select sibling navigation items 
 .removeClass（active）; //从其他导航中删除活动类
}）; 
  

In my mobile project I can press a menu tab (Tab2) and the tab becomes active (with background color for the active class) and the corresponding div (Div2) below will appear on the screen. If I press another tab, that tab gets active with corr. div etc...all in all, works perfect!

But now I have the opposite problem, I want to press (in my case, swipe) a div onto my screen and have the corresponding tab above to be active (with color). e.g. swipe in Div1 on screen, Tab1 should be active and have a certain background color. Swipe in Div2, then Tab2 should be active instead etc. but can't get it to work.

Below are my li tags:

<ul class="nav nav-pills mobileNavbar">
  <li onclick="swipeFunction(0)" class="col-xs-4 tab1" data-index="0"><a href="#">STREAM</a></li>
  <li onclick="swipeFunction(1)" class="col-xs-4 tab2" data-index="1"><a href="#">CHAT</a></li>
  <li onclick="swipeFunction(2)" class="col-xs-4 tab3" data-index="2"><a href="#">IDE</a></li>
</ul>

And my jQuery:

$('#carousel-example-generic').on('slid.bs.carousel', function() {

  var savedIndex = $(this).find('.active').index();

  if (savedIndex === 0){
    // I want Tab1 to be active here
  } else if (savedIndex == 1){
    // I want Tab2 to be active here
  } else if (savedIndex == 2){
    // I want Tab3 to be active here
  }
});

For more details into what I'm trying to build, incl. libs, images (and my previous problem, solved by "Pieter"):

Link to a section on horizontal web page

解决方案

As I commented above, you are doing same thing in all the conditions. All you need to do is, to activate the navigation item by index you are getting from carousel. Try this:

$('#carousel-example-generic').on('slid.bs.carousel', function () {

    var savedIndex = $(this).find('.active').index();

    $('.nav-pills>li:eq(' + savedIndex + ')>a').css('background', 'yellow');
});

EDIT:

I would recommend to play with a CSS class instead of inline css. Try this:

$('#carousel-example-generic').on('slid.bs.carousel', function () {

    var savedIndex = $(this).find('.active').index();

    $('.nav-pills>li:eq(' + savedIndex + ')>a')
        .addClass("active") // add active class to the current one
        .parent().siblings() // select sibling navigation items
        .removeClass("active"); // remove active class from the other navigations
});

这篇关于使当前div更改相关菜单选项卡为活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！