탭이있는 jquery 아코디언

초보자이기 때문에 포럼과 게시물을 읽었지만 여전히 아코디언을 탭하는 법을 배울 수 없습니다. 나는 다음을 사용하고있다. 아니 Ajaxed 콘텐츠.탭이있는 jquery 아코디언

jQuery를 UI 예 페이지

 $(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는 서로 달라야합니다, 당신의 탭 ID가, 예컨대 id="tabs" 필요가 각 세트는 자신의 ID가의 요구, class="tabs"로, 예를 들어 두 번째로 시작해야합니다.
내용에 대한 아코디언 헤더와 <div>은 형제 여야하므로 <h2> 요소는 아코디언에 대한 내용 <div> 요소 옆에 있어야합니다.
.dialog() 대신 아코디언에 .accordion()을 사용하도록 jQuery를 변경하십시오 (별도 플러그인 임).

귀하의 jQuery를가 결국 다음과 같이한다 (클래스 선택기를 사용 .tabs 통지) :

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

출처

2010-08-22 17:46:37

맙소사 내가 잘못 어디로 갔는지 당신의 도움 닉에 대한 정말 감사합니다, 나는 이해합니다. 너는 나를 인터넷의 주위에 pottering의 또 다른 한개 가치 저장했다! 고맙습니다. – Solidariti

@ 존 - 오신 것을 환영합니다. 질문에 대한 다른 문제가 있으면 의견을 말하십시오. :) 그렇지 않다면, 질문에 "답장"을 허용 한 대답을 표시하십시오. 또한 앞으로의 질문에서이 작업을 수행하십시오. 뿐만 아니라 –

독자적으로 작업 해 주셔서 감사합니다.하지만 내 페이지에 스타일과 기능을 삽입하면 사라집니다. 내가 내 jquery를 많이 시작하는 내 사용자 지정 스크립트 파일을 가져 오는 스크립트 파일로 축소했습니다. http://jsfiddle.net/4wSqn/3/에서 볼 수 있습니다. 아코디언과 탭을 분리하는 함수의 끝에 아코디언과 탭 jquery 코드를 넣었습니다. 그러나 내가 그것을 위로 움직이면 그것은 효과가 있습니다. 왜 문법을 엉망으로 만든거야? – Solidariti

탭이있는 jquery 아코디언

답변

관련 문제