Question

在我的代码中我现在使用六个选项卡我想知道哪个选项卡处于活动状态。更多的事情是每个选项卡在单击时调用相同的功能，我想检查激活选项卡（tab1，tab2 ..）on按钮单击哪个调用其他功能，在该功能中我想检查下面的活动标签我用代码解释我的问题

如果我在一行中说我的问题想要知道点击按钮上的活动标签调用javascript功能，则功能不在标签上点击*

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

Add.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

Answer 2

您可以将相同的类分配给所有选项卡并将文档中的单击功能绑定到准备就绪，您将通过'this'获取当前对象。

$('.tab').click(function(){
    $(this).val();
  });

Answer 3

$('.tab').click(function(){
    var x=$(this).prop('id');
    $('#lbl').html('Active Tab'+ x);
});

Answer 4

我是新来的，但您可以在点击时向活动标签添加一个毫无价值的类，然后在按钮上单击检索ID或任何您想要的内容。

的jQuery

//edit: added function to add and remove class, replaced text to illustrate

 $(function () {

    $('.tab_content').click(function () {
       $('.tab_content').removeClass('active').text('');
       $(this).addClass('active').text('am active');
     })


    $('#button').click(function () {
        $('.tab_content').each(function () {
            if ($(this).hasClass('active')) {
                alert($(this).attr('id')+" is the active tab");
                alert($(this).text()+" is the text");
            }
        });
     });
});

HTML

 <div id='1' class='tab_content'>not</div>
 <div id='2' class='tab_content active'>am active</div>
 <div id='3' class='tab_content'>not</div>
 <div id='4' class='tab_content'>not</div>

<button id='button' style='width:50px; height:50px;'>Click</button>

这是一个工作小提琴：http://jsfiddle.net/Lv5VJ/2/

我确定有更好的方法，但是嘿，我正在尝试哈哈。

Javascript：如何知道哪个选项卡处于活动状态

4 个答案: