0

我需要创建一个顶部有 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>
4

1 回答 1

0

您有多个带有 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();
});

演示：小提琴

于 2013-08-23T17:05:10.933 回答