0

I have the following code which currently runs when #a-div has focus

jQuery(document).ready(function(){
   jQuery('#a-div').focus(function(){
     if ( $( "#tab3" ).is( ".tab-pane.active" ) ) {

        $( "#another-div" ).hide();

      }
   });
});

But instead id like it to run when #tab3 has the following class .tab-pane.active

jQuery(document).ready(function(){
   jQuery('#tab3').is( ".tab-pane.active" )(function(){

        $( "#another-div" ).hide();

   });
});

But I haven't got the correct syntax.

Any help would be very much appreciated, many thanks in advance!

jimmywiddle
  • 63
  • 7
  • in jQuery there is no any event handler which gets invoked on class attachment. Instead check the `tab` documentation and find the event callback which get executed on tab active event. – vijayP Aug 04 '16 at 13:34
  • can you post your HTML and where `#another-div` is in the dom tree – Adjit Aug 04 '16 at 13:40
  • @vijayP many thanks.. this sounds like the way forward thanks.. although at this stage im not sure how to apply it... but looking further... thanks! – jimmywiddle Aug 04 '16 at 13:50
  • which tab library you are using? are you using bootstrap? or something else? – vijayP Aug 04 '16 at 13:52
  • @vijayP yes bootstrap – jimmywiddle Aug 04 '16 at 13:55

2 Answers2

0

To get your code working on document ready:

jQuery(document).ready(function(){
   if(jQuery('#tab3').is( ".tab-pane.active" )){

        $( "#another-div" ).hide();

   }
});
James Jithin
  • 10,183
  • 5
  • 36
  • 51
  • This only works if when the page loads tab3 has the relevant class, I need it to run if at any time tab3 has the relevant class. – jimmywiddle Aug 04 '16 at 13:47
  • @jimmywiddle, that case you will need to make this called when there is a class change to tab3. That could be identified only by you, in your code. You may also try MutationObservers or other ways of triggering the change as mentioned in http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed – James Jithin Aug 04 '16 at 13:50
  • I really would have thought this would be more simple to achieve than using MutationObservers? You dont have any further ideas right? Once again many thanks for your help and time!!! – jimmywiddle Aug 04 '16 at 14:15
  • Since we need an `event` to do something, we will need something similar to get this done. – James Jithin Aug 04 '16 at 14:49
-1

This snippet is using only jQuery and no external libraries. But it serves to show you how to do this.

Just add a click event handler on the class tab-pane and check if the clicked element has the class active.

The other code in this snippet just mimics the tab's switching classes. Every time a class has been clicked, it'll toggle the div with class output

I hope this is what you are searching for.

$(".tab-pane").click(function() {
  //Ignore this code, since it's mimicking the change of tabs
  changeTab($(this));
  
  var tab = parseInt($(this).data("tab"));
  
  switch(tab)
  {
   case 1:
    $(".output").css("border", "2px dashed red");
    break;
    
    case 2:
    $(".output").css("border", "2px dotted blue");
    break;
    
    default:
    case 3:
    $(".output").css("border", "2px solid black");
    break;
  }
  
  $("#tabnr").html(tab);
  
});



function changeTab(pEl)
{
 $(".tab-pane").each(function() {
   $(this).removeClass("active");
  });
  
  pEl.addClass("active");
}
.tab-pane {
  height: 100px;
  width: 200px;
  border: 2px solid black;
  background-color: lightblue;
  float: left;
  margin-left: 15px;
}

.first {
  border: 2px dashed red;
}

.second {
  border: 2px dotted blue;
}

.active {
  background-color: beige;
}

.clearfix {
  clear: both;
}

.output {
  width: 100%;
  height: 50%;
  background-color: lightgreen;
  margin-top: 30px;
  border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane first" data-tab="1"> 
  Tab 1
</div>
<div class="tab-pane second" data-tab="2">
  Tab 2
</div>
<div class="tab-pane active" data-tab="3">
  Tab 3
</div>

<div class="clearfix"></div>

<div class="output">
  This output is altered by clicking on the tabs above. You are on tab <span id="tabnr">3</span>
</div>
Jorrex
  • 1,503
  • 3
  • 13
  • 32
  • many thanks once again though.. This only works if when the page loads tab3 has the relevant class, I need it to run if at any time tab3 has the relevant class. – jimmywiddle Aug 04 '16 at 13:53
  • That is what I understood from your question. – Jorrex Aug 04 '16 at 14:09
  • sorry for the misunderstanding and thanks again for your help, but yes id like `$("#another-div").hide();` to fire anytime that `#tab3` has the relevant class.. not only when the page loads (which is what currently happens), i cant imagine this is so difficult but I now find myself looking into the possibility of DomMutations :/ – jimmywiddle Aug 04 '16 at 14:13
  • It's not that hard, I just misunderstood your question the first time. I added a snippet and I hope this is what you are searching for. – Jorrex Aug 04 '16 at 14:31
  • thanks again for your time and help, much appreciated!!! Wont this again run on click only after if the tab is active.. therefore the tab would have to be active first then the user click within the tab-pane right? – jimmywiddle Aug 04 '16 at 14:53
  • if the class `active` is on that tab and you click on it, the code will run. If you want the tab to be active before you click on it, you'll have to assign the `active` class beforehand in some way. What are is your purpose? What is it exactly you're trying to do. Perhaps you could share a fiddle? – Jorrex Aug 04 '16 at 15:15
  • yes unfortunely that wont work then the user will have to click (or could use the keyboard) to make tab3 active, then click again before the necessary content is hidden. I need a to fire the event on the div becoming active ideally irrelevant of a click. – jimmywiddle Aug 04 '16 at 15:22
  • Perhaps you're looking at it wrong. You are searching for a way to hide some content whenever Tab3 is opened. But basing this on the `active` class is too general, since it is used on all tabs. Perhaps adding a click event on the `tab-pane` in general and checking if you are on tab3 and then execute specific code for that tab (perhaps using a `switch` statement) – Jorrex Aug 04 '16 at 15:28
  • Many thanks again @Jorrex.. but a click on tab-pane once tab3 is already active wont work either.. the tab will be shown and the div..until the user makes another click... as I explained say I think I dont think the click/hover will do the trick either.. there are many touch screen devices, I need something that simple continuiously checks for tab3 having the active class.. once again many thanks!!!! – jimmywiddle Aug 04 '16 at 15:28
  • use an interval that executes x-amount of seconds. Check if the tab has the class and if it does, execute your code. – Jorrex Aug 04 '16 at 15:38