2013-08-22 86 views
0

IAM新jQuery.I想打開第二個選項卡(操作)在頁面加載deafult。打開第二個手風琴菜單選項卡使用jquery

<HTML> 
</HEAD> 
<BODY> 
<br></br> 
<H2> Automation </H2> 
<br></br> 
<ul id="accordion"> 
    <li>Operations</li> 
    <ul> 
     <li><a href="#">Add</a></li> 
     <li><a href="#">Delete</a></li> 

    </ul> 
    <li>Deatils</li> 
    <ul> 
    <br></br> 
<table border="" bordercolor="#FFCC00" style="background-color:#FFFFFF" width="400" cellpadding="8" cellspacing="1"> 
    <tr> 
     <td><input type="Radio" name="radio_name" value="radio_val">1</td> 
     <td>.</td> 
     <td>.</td> 
     <td>.......</td> 
    </tr> 
    <tr> 
     <td><input type="Radio" name="radio_name" value="radio_val">2</td> 
     <td>.</td> 
     <td>.</td> 
     <td>.......</td> 
    </tr> 

</table> 

    </ul> 
     </ul> 

</BODY> 

</HTML> 

我用以下code.but它不工作

 <SCRIPT> 

$("#accordion > li").click(function(){ 

    $('#accordion li:eq(1)').show(); 

     if(false == $(this).next().is(':visible')) { 
      $('#accordion > ul').slideUp(300); 
    } 
    $(this).next().slideToggle(300); 
}); 

$('#accordion > ul:eq(0)').show(); 

</SCRIPT> 

而頁面加載如何設置第二個選項卡開放默認。

回答

1

似乎你沒有完全使用JQuery手風琴。

這是一個用於JQuery手風琴的JSFiddle Demo,默認打開第二個選項卡。

HTML

<br></br> 
<H2> Automation </H2> 
<br></br> 
<ul id="accordion"> 
    <h3>Operations</h3> 
    <div> 
    <ul> 
     <li><a href="#">Add</a></li> 
     <li><a href="#">Delete</a></li> 

    </ul> 
    </div> 
    <h3>Deatils</h3> 
    <ul> 
    <br></br> 
<table border="" bordercolor="#FFCC00" style="background-color:#FFFFFF" width="400" cellpadding="8" cellspacing="1"> 
    <tr> 
     <td><input type="Radio" name="radio_name" value="radio_val">1</td> 
     <td>.</td> 
     <td>.</td> 
     <td>.......</td> 
    </tr> 
    <tr> 
     <td><input type="Radio" name="radio_name" value="radio_val">2</td> 
     <td>.</td> 
     <td>.</td> 
     <td>.......</td> 
    </tr> 

</table> 

    </ul> 
     </ul> 

JQUERY

$(function() { 
    $("#accordion").accordion(); 
    $("#accordion").accordion("activate",1); 
    }); 

檢查我所做的HTML變化。

Check how to perform JQuery accordion

1
<script> 
    $(document).ready(function(){ 

     $('#accordion li:eq(1)').show(); // second tab show 
$('#accordion li:eq(1) ul').show(); // second tab show 

     $("#accordion > li").click(function(){ 

      if($(this).next().is(':visible')) { 
       $('#accordion > ul').slideUp(300); 
      } 
      $(this).next().slideToggle(300); 
     }); 

    }); 
    </script> 
相關問題