問題與jQuery標籤

Question

這裏是我所看見的教程：http://papermashup.com/simple-jquery-tabs/ 正如你可以看到「標籤」和「內容」屬於同一個<div id="tabs">......</div>

所以現在我要顯示在另一個DIV內容標記而不是在<div id="tabs">......</div>

例如，

當前版本：

<div id="tabs"> 
<ul> 
    <li><a href="#tab-1">This is Tab 1</a></li> 
    <li><a href="#tab-2">Tab Two</a></li> 
    <li><a href="#tab-3">Tab Three</a></li> 
    <li><a href="#tab-4">Tab Four</a></li> 
</ul> 
<div id="tab-1"> 
    <h3>This is a really simple tabbed interface</h3> 
    <p><img src="http://papermashup.com/demos/jquery-gallery/images/t1.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/> 
    <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a> </p> 
</div> 
<div id="tab-2"> 
    <h3>Tab 2</h3> 
    <p><img src="http://papermashup.com/demos/jquery-gallery/images/t2.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec <br/> 
    <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p> 
</div> 
<div id="tab-3"> 
    <h3>Tab 3</h3> 
    <p><img src="http://papermashup.com/demos/jquery-gallery/images/t3.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio.<br/> 
    <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p> 
</div> 
<div id="tab-4"> 
    <h3>Tab 4</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus.<br/> 
    <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p> 
</div> 

新文本/我想做的事：

<div id="tabs"> 
     <ul> 
      <li><a href="#tab-1">This is Tab 1</a></li> 
      <li><a href="#tab-2">Tab Two</a></li> 
      <li><a href="#tab-3">Tab Three</a></li> 
      <li><a href="#tab-4">Tab Four</a></li> 
     </ul> 

     </div> 

    <div id="MYNEWID"> 
     <div id="tab-1"> 
      <h3>This is a really simple tabbed interface</h3> 
      <p><img src="http://papermashup.com/demos/jquery-gallery/images/t1.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/> 
      <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a> </p> 
     </div> 

</div> 

希望你明白我的意思！謝謝 ！

Answer 1

試着改變你的jQuery代碼，以反映新的div：

$(document).ready(function(){ 
$('#MYNEWID div').hide(); 
$('#MYNEWID div:first').show(); 
$('#tabs ul li:first').addClass('active'); 

$('#tabs ul li a').click(function(){ 
$('#tabs ul li').removeClass('active'); 
$(this).parent().addClass('active'); 
var currentTab = $(this).attr('href'); 
$('#MYNEWID div').hide(); 
$(currentTab).show(); 
return false; 
}); 
});