Javascript jquery Accordion-如何在页面加载时默认打开第二个选项卡_Javascript_Jquery_List_Accordion_Jquery Tabs

Javascript jquery Accordion-如何在页面加载时默认打开第二个选项卡

javascript jquery list

Javascript jquery Accordion-如何在页面加载时默认打开第二个选项卡,javascript,jquery,list,accordion,jquery-tabs,Javascript,Jquery,List,Accordion,Jquery Tabs,我是jquery和javascript的绝对高手，实际上我只是在使用我在网上找到的一个简单代码。这将创建一个手风琴列表，但我想在页面加载时打开第二个选项卡（或第一个以外的任何选项卡）。然后，单击任何其他选项卡时，默认打开的选项卡应关闭这是我正在使用的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

我是jquery和javascript的绝对高手，实际上我只是在使用我在网上找到的一个简单代码。这将创建一个手风琴列表，但我想在页面加载时打开第二个选项卡（或第一个以外的任何选项卡）。然后，单击任何其他选项卡时，默认打开的选项卡应关闭

这是我正在使用的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>

<style>
    .accord-content { display: none; }
</style>
</head>

<body>
    <div class="accordion">
    <div class="accord-header">Header 1</div>
    <div class="accord-content">This is the content for the first header.</div>
    <div class="accord-header">Header 2</div>
    <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>

</body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(".accordion .accord-header").click(function() {
    if($(this).next("div").is(":visible")){
    $(this).next("div").slideUp("slow");
    } else {
    $(".accordion .accord-content").slideUp("slow");
    $(this).next("div").slideToggle("slow");
    }
    });
    });
    </script>
</html>


文件
.accord内容{显示：无；}
标题1
这是第一个标题的内容。
标题2
Lorem ipsum dolor sit amet，是一位杰出的献身者。
$（文档）.ready（函数（）{
$（“.accordion.accord头”）。单击（函数（）{
如果（$（this）.next（“div”）是（“：可见”））{
$（此）.next（“div”）.slideUp（“慢”）；
}否则{
$（“.accordion.accord内容”）.slideUp（“慢”）；
$（此）.next（“div”）.slideToggle（“慢”）；
}
});
});

我怎样才能做到这一点？越简单越好

提前感谢大家。

您可以使用模拟单击所需选项卡。这是一个很好的例子

在jquery上，在文档结束之前。就绪：

$(".accordion .accord-header:eq(1)").trigger('click');

因此，您的最终JS：

$(document).ready(function() {
    $(".accordion .accord-header").click(function() {
        if($(this).next("div").is(":visible")){
            $(this).next("div").slideUp("slow");
        } else {
            $(".accordion .accord-content").slideUp("slow");
            $(this).next("div").slideToggle("slow");
        }
    });
    $(".accordion .accord-header:eq(1)").trigger('click');
});

更优雅的方式：

$( ".selector" ).accordion({ active: 1 });

请记住，活动属性的索引为零。0表示第一个选项卡。1代表第二个

非常感谢。如果我需要在accordion中插入另一个选项（标题3、4、5等），该怎么办？您好，您可以添加html代码=）看看这个更新的fiddle：按照这个思路，您可以简单地向html元素添加“data slide=1”，然后执行如下操作：$（“.selector”）。每个（函数（i，项）{$（this.accordion）({active:parseInt（$（this.attr（'data-slide'），10）}）；}）；当你得到可折叠的

true时，语法是什么？@Andrew你为什么要这么做。看看你的示例代码有多可怕。