Question

我有以下代码，当#a-div focus

时，它会运行

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

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

      }
   });
});

但是当#tab3具有以下类.tab-pane.active

时，我会运行id

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

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

   });
});

但我还没有正确的语法。

非常感谢任何帮助，非常感谢提前！

Answer 1

让您的代码处理文档就绪：

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

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

   }
});

Answer 2

此代码段仅使用jQuery而不使用外部库。但它可以告诉你如何做到这一点。

只需在班级tab-pane上添加点击事件处理程序，然后检查点击的元素是否包含班级active。

此代码段中的其他代码只是模仿了标签的切换类。每次点击课程时，它都会使用课程output

切换div

我希望这就是你要找的东西。

$(".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>

当div id有一个类时，jquery运行

2 个答案: