Javascript：如何知道哪个选项卡处于活动状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24948891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript : how to know which tab is active
提问by CrazyCoder
In my code i am using six tabs now i want to know which tab is active .one more thing is that each tab call the same function on clicking and i want to check activation tab(either tab1,tab2 ..) on button click which call other function and in that function i want to check active tab below i explain my problem with code
在我的代码中，我现在使用六个选项卡，我想知道哪个选项卡处于活动状态。还有一件事是每个选项卡在单击时调用相同的功能，我想在按钮单击时检查激活选项卡（tab1、tab2 ..）调用其他函数，在该函数中我想检查下面的活动选项卡，我用代码解释我的问题
If i say my problem in one line that want to know active tab on clicking button which call javascript function ,function not on tab clicking*
如果我在一行中说我的问题，想知道单击调用 javascript 函数的按钮上的活动选项卡，而不是单击选项卡上的功能*
here i m not putting all code of pages but only require code ,Hope you understand my problems and i provide needed code Thanks in advance
在这里我没有把所有的页面代码，而是只需要代码，希望你理解我的问题，我提供了需要的代码提前谢谢
Add.jsp
添加.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 Script function:
JAVA脚本功能：
This is the function on which i want to know which tab is active that is defined in above jsp
这是我想知道在上面的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);
}
}
采纳答案by Arunkumar
回答by Alok Pathak
you can assign same class to all tab and bind the click function in document ready, you will get the current object by 'this'.
您可以为所有选项卡分配相同的类并在文档中绑定单击功能准备好，您将通过'this'获得当前对象。
$('.tab').click(function(){
$(this).val();
});
回答by Ramniwas chhimpa
$('.tab').click(function(){
var x=$(this).prop('id');
$('#lbl').html('Active Tab'+ x);
});
回答by C Jones
I'm new here but you could add a worthless class to the active tab on click, then on the button click retrieve the id or whatever you want.
我是新来的，但您可以在单击时向活动选项卡添加一个毫无价值的类，然后在按钮上单击检索 ID 或任何您想要的。
jQuery
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
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>
Here is a working fiddle: http://jsfiddle.net/Lv5VJ/2/
这是一个工作小提琴：http: //jsfiddle.net/Lv5VJ/2/
I'm sure there are better ways but hey, I'm trying haha.
我确定有更好的方法，但是嘿，我正在尝试哈哈。
