Javascript：如何知道哪個選項卡是活動的

在我的代碼中，我現在使用六個選項卡，我想知道哪個選項卡處於活動狀態。更多的事情是每個選項卡在單擊時調用相同的功能，並且我想檢查激活選項卡按鈕點擊該調用其他功能，在該功能我要檢查活動標籤下面我用代碼Javascript：如何知道哪個選項卡是活動的

解釋我的問題，如果我說我在一條線的問題，想知道（或者TAB1，TAB2 ..）點擊按鈕調用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); 
    } 
    }

來源

2014-07-25 ketan

添加一個類名到活動標籤點擊然後點擊按鈕點擊獲取活動類名的標籤。 – Arvind

嘗試像

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

Fiddle

來源

2014-07-25 05:59:09 Arunkumar

試試這個http://jsfiddle.net/9d6Wt/1/ – Arunkumar

可以同一類分配給所有標籤，然後在文件準備綁定的點擊功能，您將通過「這個」獲取當前對象。

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

來源

2014-07-25 06:03:36

感謝您的回覆，但我想知道其他按鈕上的激活選項卡單擊AddInspection，因爲在我的jsp不在該選項卡上單擊查看我的選項卡已激活，然後當我點擊該功能中的按鈕，我想知道 – ketan

因此，您可以創建輸入類型隱藏標籤並使用激活的標籤值更新隱藏標籤的值，現在當您更改標籤時，其值將存儲在隱藏標籤中，您將隨時從腳本中讀取隱藏標記。 –

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

來源

2014-07-25 06:08:41

這是一個好主意，提供解釋與你的代碼......關於教一個人釣魚，而不是給魚的整個事情。 –

我是新來的，但你可以添加一個毫無價值類活動選項卡上單擊，然後點擊按鈕獲取任何你想要的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/

我敢肯定有更好的方法，但是，嘿，我想哈哈。

來源

2014-07-25 06:36:59

Javascript：如何知道哪個選項卡是活動的

回答

相關問題