選項卡上的複選框應用程序

嗨最初tab1已啓用，tab2，tab3處於禁用模式。通過點擊tab1中的第一個複選框然後tab2將被啓用，並且我將轉到第二個選項卡，如果我將取消選中tab1中的複選框，那麼tab2將被禁用。第二個複選框的操作相同。在小提琴它正在工作，但在我的netbeans IDE它不工作爲什麼？我一直在頭裏面保存javascript和html。在小提琴中：http://jsfiddle.net/AavsW/14/選項卡上的複選框應用程序

我該怎麼做才能讓它在我的ide中工作？

在IDE我已經這樣寫的：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>JSP Page</title> 

<script type="text/javascript"> 

     $(document).ready(function() { 
$('#wizard').tabs({ disabled: [1, 2] }); 

// when checkbox is clicked 
$('.terms').click(function() { 
    // get tab id 
    var iTab = $(this).data('tabid'); 
    // is checkbox checked 
    if ($(this).is(':checked')) { 
     // enable tab 
     $('#wizard').tabs('enable', iTab); 
     // select tab 
     $('#wizard').tabs('select', iTab); 
    } else { 
     // disable tab 
     $('#wizard').tabs('disable', iTab); 
     // empty textarea on the disabled tab 
     $('#tab' + (iTab + 1) + ' .text').val(''); 
    } 
}); 
}); 

    </script> 
</head> 
<body> 
<form name="frm"> 
<div id="wizard"> 
<ul> 
    <li><a href="#tab1">tab 1</a></li> 
    <li><a href="#tab2">tab 2</a></li> 
    <li><a href="#tab3">tab 3</a></li> 
</ul> 
<div id="tab1"> 
    <input type="checkbox" class="terms" data-tabid="1" onclick="" /> Terms 1<br /> 
    <input type="checkbox" class="terms" data-tabid="2" /> Terms 2 
</div> 
<div id="tab2"><textarea class="text"></textarea></div> 
<div id="tab3"><textarea class="text"></textarea></div> 
</div> 
</form> 
</body> 
</html>

來源

2012-01-31 harry

你有沒有在瀏覽器中測試，是否所有的風格和JavaScript的是作爲輸入...？未必。

用腳本測試下面的測試HTML文件。它的工作原理與jsfiddle相同。

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script> 
     <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
     <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.core.css"> 
     <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.theme.css"> 
       <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.tabs.css"> 
     <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css"> 
     <title>JSP Page</title> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#wizard').tabs({ disabled: [1, 2] }); 
      $('.terms').click(function() { 

      var iTab = $(this).data('tabid');     
      if ($(this).is(':checked')) { 

         $('#wizard').tabs('enable', iTab); 

         $('#wizard').tabs('select', iTab); 
      } else { 
         $('#wizard').tabs('disable', iTab); 
         $('#tab' + (iTab + 1) + ' .text').val(''); 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
<form name="frm"> 
     <div id="wizard"> 
       <ul> 
        <li><a href="#wizard-1">tab 1</a></li> 
        <li><a href="#wizard-2">tab 2</a></li> 
        <li><a href="#wizard-3">tab 3</a></li> 
       </ul> 

       <div id="wizard-1"> 
        <input type="checkbox" class="terms" data-tabid="1" onclick="" /> Terms 1<br /> 
        <input type="checkbox" class="terms" data-tabid="2" /> Terms 2 
       </div> 

       <div id="wizard-2"><textarea class="text"></textarea></div> 

       <div id="wizard-3"><textarea class="text"></textarea></div> 
     </div> 
</form> 
</body> 
</html>

來源

2012-01-31 08:23:45

答覆我看到無論是工作或沒有 – harry 2012-01-31 09:55:32

感謝您好感謝您的幫助很多Umesh製作一切正常 – harry 2012-01-31 09:59:19

我是新來這個JavaScript。請告訴我我錯在哪裏？對於jQuery我需要導入這麼多的js文件，但在小提琴它如何運行？ – harry 2012-01-31 10:00:39

選項卡上的複選框應用程序

回答

相關問題