1

I have got a task to do Jquery tab. On load the all tabs are disabled only the first tab is enabled also its radio button must be selected. If change the radio button then tab also have to change. My page is

<script>
  $(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,2,3]
});
    $( "input[type=submit], a, button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });
      $('#enable1').click( function(){
      alert("a");
        $( "#tabs-2" ).tabs({ enabled: true });
      });
  });
  </script>

    <li><a href="#tabs-1">klj</a> </li>
    <li><a href="#tabs-2">jljl</a></li>
    <li><a href="#tabs-3">Sachin</a></li>
    <li><a href="#tabs-4">Ganguly</a></li>
  </ul>
  <div id="tabs-1">
    <p>jkljl</p>
  </div>
  <div id="tabs-2">
    <p>jkljl</p>
  </div>
   <div id="tabs-3">
    <p>Sachin</p>
  </div>
   <div id="tabs-4">
    <p>Ganguly</p>
  </div>
</div>

<input type="radio" name="tabs-1" value="tabs-1">tabs-1
<input type="radio" name="tabs-2" value="tabs-2">tabs-2
<input type="radio" name="tabs-3" value="tabs-3">tabs-3
<input type="radio" name="tabs-4" value="tabs-4">tabs-4<br>
</body>
</html>

How to do this?

4

3 回答 3

1

Give your radio inputs id "enable";

<input type="radio" id="enable1" name="tabs-1" value="tabs-1">tabs-1
<input type="radio" name="tabs-2" id="enable2" value="tabs-2">tabs-2
<input type="radio" name="tabs-3" id="enable3" value="tabs-3">tabs-3
<input type="radio" name="tabs-4" id="enable4" value="tabs-4">tabs-4<br>

Also you should change enable and extend $('#enable2').click( function(){ alert("a"); $( "#tabs" ).tabs('enable', 2); }); to others. It is better to handle it via one function and send the tabid to the function

Here's the live demo: Live Demo

于 2013-03-04T07:56:19.150 回答
1

Live ID here :-> http://jsfiddle.net/2aQ2g/

Change you code to this

Radio buttons 

<input type="radio" name="tabs" value="1">tabs-1
<input type="radio" name="tabs" value="2">tabs-2
<input type="radio" name="tabs" value="3">tabs-3
<input type="radio" name="tabs" value="4">tabs-4<br>

EDIT Have simplified the code further

 $(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,2,3]
  });
  $( "input[type=submit], a, button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });  
 $( "input[type=radio]" ).click(function(){
     $('#tabs').tabs("enable", $(this).val());
     $('#tabs').tabs("select", $(this).val() );
});

}

 );
于 2013-03-04T08:12:12.863 回答
1 
$("input[type='radio']").click(function(){

    var val = $(this).val();
   $("[href='#"+val+"']").parent().attr('class','ui-state-default ui-corner-top');
});
于 2013-03-04T08:14:52.720 回答