Question

我需要创建一个页面，顶部有3个标签，每个标签内都有一个手风琴，但我只能装入第一个手风琴，而其他手风琴则显示为未渲染。任何帮助，将不胜感激。我确实看到手风琴应该放在这个实例中的标签之前，但这对我来说也不起作用。

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

    <title>Details</title>

    <!-- Website Styles -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">






    <style type="text/css">
    body {
    background-color: #000000;
}
    </style>

</head>

<body>

<div class="wrapper">
     <div class="one_half">
     </div>


<div class="one_half last">
   <!-- Accordion -->


   <h2 class="demoHeaders">Tabs</h2>
      <div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1"><h2 class="demoHeaders">Accordion</h2>
    <div id="accordion">
    <h3>First</h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    <h3>Second</h3>
    <div>Phasellus mattis tincidunt nibh.</div>
    <h3>Third</h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
   </div>
</div>
    <div id="tabs-2"><div id="accordion">
    <h3>First</h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    <h3>Second</h3>
    <div>Phasellus mattis tincidunt nibh.</div>
    <h3>Third</h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div></div>
    <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>


     </div>
   </div>





</div>

        <!-- jQuery Scripts -->
        <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.js"></script>
    <script>$(function() {

        $( "#accordion" ).accordion();
                $( "#tabs" ).tabs();
        });
        </script>

</body> 
</html>

Answer 1

您有多个ID为accordion的元素，它必须是唯一的，因此请将其更改为accordion1，accordion2和accordion3然后

$( "#accordion1, #accordion2, #accordion3" ).accordion();

或代替id使用类属性accordion然后

$('.accordion').accordion();

例如：

<div class="wrapper">
    <div class="one_half">
    </div>
    <div class="one_half last">
        <!-- Accordion -->
        <h2 class="demoHeaders">Tabs</h2>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">First</a></li>
                <li><a href="#tabs-2">Second</a></li>
                <li><a href="#tabs-3">Third</a></li>
            </ul>
            <div id="tabs-1"><h2 class="demoHeaders">Accordion</h2>
                <div class="accordion">
                    <h3>First</h3>
                    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
                    <h3>Second</h3>
                    <div>Phasellus mattis tincidunt nibh.</div>
                    <h3>Third</h3>
                    <div>Nam dui erat, auctor a, dignissim quis.</div>
                </div>
            </div>
            <div id="tabs-2"><div class="accordion">
                <h3>First</h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
                <h3>Second</h3>
                <div>Phasellus mattis tincidunt nibh.</div>
                <h3>Third</h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div></div>
                <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
            </div>
        </div>
    </div>

</div>

脚本

$(function() {
    $('.accordion').accordion();
    $( "#tabs" ).tabs();
});

演示：Fiddle

在jQuery选项卡中嵌套多个手风琴

1 个答案: