Question

我是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>

我使用了以下代码。但它无效

     <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>

在页面加载时如何将第二个标签设置为打开默认值。

Answer 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>

Answer 2

好像你没有完全使用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

使用Jquery打开第二个Accordion Menu选项卡

2 个答案: