JavaScript : how to know which tab is active

Question

在我的代码中，我现在使用六个选项卡，我想知道哪个选项卡处于事件状态。还有一件事是，每个选项卡在单击时调用相同的函数，我想检查激活选项卡(选项卡1、选项卡2..)单击按钮调用其他函数，在该函数中我想检查下面的事件选项卡，我用代码解释我的问题

如果我在一行中说我的问题，想知道单击按钮上调用 javascript 函数的事件选项卡，则函数不在选项卡单击上*

这里我没有放置页面的所有代码，而只放置需要的代码，希望您理解我的问题并提供所需的代码提前致谢

添加.jsp

  This is the page on which i am using tabs


   <form action="AddInspServlet" method="Post" enctype="multipart/form-data"> <div>
                <div id="slider">
                    <div class="form-step" >

                        <div class="row">
                            <div class="form-left">container Number *</div>
                            <div class="form-right"><input type="text" id="fname" name="contno" class="form-input" onblur="sending(this.value)"/></div>
                            <div class="form-error"></div>
                        </div>
                        <div class="row">
                            <div class="form-left">Container type *</div>
                            <div class="form-right"><input type="text" id="lname" name="conttype" disabled="disabled" class="form-input" /></div>
                            <div class="form-error"></div>
                        </div>
                        <div class="row">
                            <div class="form-left">Inspection type *</div>
                            <div class="form-right">
                                <select id="gender" name="insptype">
                                    <option value="0">Select</option>
                                    <option value="Gate In">Gate In</option>
                                    <option value="Gate Out">Gte Out</option>
                                </select>
                            </div>
                            <div class="form-error"></div>
                        </div>
                        <div class="row">
                            <div class="form-left">Place</div>
                            <div class="form-right"><input type="text" id="places" name="places" class="form-input" /></div>
                            <div class="form-error"></div>
                        </div>
                    </div>

                    <div class="form-step" >                                
                            <div class="form-left1">                                    
                           <div class="container1">
                                <ul class="tabs">

                                    <li><a href="#tab1" onclick="return ValidateFileUpload('img1')">Left</a></li>
                                    <li><a href="#tab2" onclick="return ValidateFileUpload('img2')">Right</a></li>
                                    <li><a href="#tab3" onclick="return ValidateFileUpload('img3')">Top</a></li>
                                    <li><a href="#tab4" onclick="return ValidateFileUpload('img4')">Bottom</a></li>
                                    <li><a href="#tab5" onclick="return ValidateFileUpload('img5')">Front</a></li>
                                    <li><a href="#tab6" onclick="return ValidateFileUpload('img6')">Rear</a></li>

                                </ul>
                                <div class="tab_container">
                                    <div id="tab1" class="tab_content">
                                    <div id="hidendiv"></div>
                                        <h2>Left Side</h2>
                                        <div id="leftside">
                                        </div>
                                         <input type="file" name="img1" id="img1" onchange="return ValidateFileUpload('img1')" />

                                    </div>

                                    <div id="tab2" class="tab_content">
                                        <h2>Right Side</h2>
                                        <div id="rightside">
                                        </div>      
                                        <input type="file" name="img2" id="img2" onchange="return ValidateFileUpload('img2')" />
                                    </div>

                                    <div id="tab3" class="tab_content">
                                        <h2>Top Side</h2>
                                        <div id="topside">
                                        </div>  
                                        <input type="file" name="img3" id="img3" onchange="return ValidateFileUpload('img3')" />
                                   </div>

                                    <div id="tab4" class="tab_content">
                                        <h2>Bottom Side</h2>
                                        <div id="bottomside">
                                        </div>  
                                         <input type="file" name="img4" id="img4" onchange="return ValidateFileUpload('img4')" />
                                   </div>

                                   <div id="tab5" class="tab_content">
                                        <h2>Front Side</h2>
                                        <div id="frontside">
                                        </div>  
                                        <input type="file" name="img5" id="img5" onchange="return ValidateFileUpload('img5')" />
                                   </div>

                                   <div id="tab6" class="tab_content">
                                        <h2>Rear Side</h2>
                                        <div id="rearside">
                                        </div>  
                                        <input type="file" name="img6" id="img6" onchange="return ValidateFileUpload('img6')" />
                                   </div>
                                </div>
                        </div>
                            </div>
                            <div class="form-right1">

                                 <img src="images/noimg.jpg" height="288px" width="400px" id="blah">
                            </div>

                     <div style=" width: 200px; margin-top:225px; margin-left:300px">Remarks: <input type="text" width="100px" name="remark"/></div>

                    </div>

                </div>
         </div>

         <div class= "ash" style="width:auto; margin-left:35%; float: left;">
            <input type="submit" name="btn" id="submit" value="AddInspection" onclick="im()" />
            <input type="submit" name="btn" value="Cancel"/>    
         </div>
  </form>

JAVA脚本函数:

这是我想知道上面jsp中定义的哪个选项卡处于事件状态的函数

            <script type="text/javascript">
   function im()
 {  
 /*alert("calling im function");
  var tabname = document.getElementById("tab1");
 if(tabname){
    alert("tab1 is active");
  }else{
    alert("tab 1 is not active");
  }*/

if($('#img1').val()=="" || $('#img2').val()=="" || $('#img3').val()=="" || $('#img4').val()=="" || $('#img5').val()=="" || $('#img6').val()=="")

    {
        alert("Please select image");
        $('#submit').prop('disabled',true);
    }
 else
    {
    $('#submit').prop('disabled',false);
    }
  }

Answer 1

尝试一下

$('.tab').click(function(){
var a=$(this).attr('id');
$('#sample').html('Active Tab is'+a);
});

Fiddle