jquery手风琴与标签

作为一个新手我已阅读论坛和帖子，但仍不能解决如何有手风琴内的标签。我正在使用以下内容。没有Ajax的内容。jquery手风琴与标签

jQuery UI的示例Page

 $(function() { 
      $("#accordion").dialog({ 
       open: function(){ 
        $("#tabs").tabs(); 
       } 
      }); 
     }); 

    </script> 
    <style type="text/css"> 
     /*demo page css*/ 
     body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 
     .demoHeaders { margin-top: 2em; } 
     #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} 
     #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} 
     ul#icons {margin: 0; padding: 0;} 
     ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} 
     ul#icons span.ui-icon {float: left; margin: 0 4px;} 
    </style>  
</head> 
<body> 

    <!-- Accordion --> 
    <h2 class="demoHeaders">Accordion</h2> 
    <div id="accordion"> 
     <div> 
      <h3><a href="#">First</a></h3> 
      <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 

      <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</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> 
      <h3><a href="#">Second</a></h3> 
      <div>Phasellus mattis tincidunt nibh.</div> 
      <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</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> 
      <h3><a href="#">Third</a></h3> 
      <div>Nam dui erat, auctor a, dignissim quis.</div> 
      <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</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> 




</body>

来源

2010-08-22 Solidariti

你有几个错误，防止这种工作，all fixed in a demo here。 <a href="#tabs-4">及以下等相应的<div id="tabs-4">：

ID必须是唯一的，你的标签标识，e.g id="tabs"需要被class="tabs"，也每组需要它自己的ID，例如第二应该开始。
手风琴的标题和<div>内容需要是兄弟，所以<h2>元素应该在手风琴的内容<div>元素旁边。
改变你的jQuery使用手风琴.accordion()而不是.dialog()（这是一个单独的插件）。

你的jQuery应该是这样的中端（使用类选择通知.tabs）：

$("#accordion").accordion(); 
$(".tabs").tabs();

来源

2010-08-22 17:46:37

天哪非常感谢你的帮助尼克，我明白了，我出了问题。你已经为我节省了另外一个夜晚在互联网上的价值！谢谢。 – Solidariti 2010-08-22 18:34:02

@John - 欢迎您，如果您有其他问题，请发表评论:)如果不是，请确保将答案标记为已接受，以“关闭”问题....还请确保在未来的问题上做到这一点以及 – 2010-08-22 20:30:50

谢谢你，我有它自己的工作，但是当我将它插入到我的页面时，样式和功能消失。我已经缩小到一个脚本文件，我将其导入我的自定义脚本文件，这启动了很多我的jQuery。它可以在http://jsfiddle.net/4wSqn/3/看到，因为你会注意到我已经把你的手风琴和jQuery代码放在了打破手风琴和标签的函数的末尾。但是如果我将它移到顶端，它就会起作用。为什么我弄乱了语法？ – Solidariti 2010-08-22 21:43:41

jquery手风琴与标签

回答

相关问题