2013-07-14 126 views
0

這是我的選項卡菜單,在這裏用戶可以選擇選項卡加載WordPress的帖子點擊錨

<div id="slider-menu" class="row"> 
    <div class="span12"> 
     <ul class="nav nav-tabs" id="myTab"> 
      <li class="active"><a href="#home">Latest events</a><div class="triangle"></div></li> 
      <li><a href="#profile">Our champions</a></li> 
      <li><a href="#messages">We have puppies!</a></li> 
     </ul> 
    </div> 
</div> 

而且有我的標籤,其中內容被加載時,頁面加載

<div class="tab-content"> 
     <div class="tab-pane active" id="home"> 
      <img src="<?php bloginfo('template_url'); ?>/img/slider.png" /> 
      <div class="span12"> 
       <?php 
       query_posts('cat=7'); 
        if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <h3><a href="<?php the_permalink() ?>" rel="bookmark" title=""><?php the_title(); ?></a></h3> 
        <?php the_content(); ?> 
        <?php endwhile; else: ?> 
        <p>Sorry, no posts matched your criteria.</p> 
        <?php endif; ?> 
      </div> 
     </div> 
     <div class="tab-pane" id="profile"> 
      <img src="<?php bloginfo('template_url'); ?>/img/slider.png" /> 
      <div class="span12"> 
       <?php 
       query_posts('cat=8'); 
        if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <h3><a href="<?php the_permalink() ?>" rel="bookmark" title=""><?php the_title(); ?></a></h3> 
        <?php the_content(); ?> 
        <?php endwhile; else: ?> 
        <p>Sorry, no posts matched your criteria.</p> 
        <?php endif; ?> 
      </div> 
     </div> 
     <div class="tab-pane" id="messages"> 
      <img src="<?php bloginfo('template_url'); ?>/img/slider.png" /> 
      <div class="span12"> 
       <?php 
       query_posts('cat=9'); 
        if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <h3><a href="<?php the_permalink() ?>" rel="bookmark" title=""><?php the_title(); ?></a></h3> 
        <?php the_content(); ?> 
        <?php endwhile; else: ?> 
        <p>Sorry, no posts matched your criteria.</p> 
        <?php endif; ?> 
      </div> 
     </div> 
    </div> 

當會有很多帖子,它會將頁面加載太久,所以我的基本想法是在頁面加載時將所有帖子加載到第一個標籤,並在用戶選擇它時將帖子加載到另一個標籤。

我很努力如何結合wp文章循環和ajax加載帖子時,用戶點擊特定標籤。

非常感謝您的幫助。

+0

[如果這有幫助](http://stackoverflow.com/questions/16127557/loading-database-content-via-xmlhttprequest-in-wordpress/16128067#16128067)。 –

回答

0
$.ajaxSetup({cache:false}); 
$('#myTab li').click(function(){ 
    var cat_id = $(this).children().attr('rel'); 
    $.get('location.href' + cat_id, function(data) { 
    $('#' + cat_id).html(data); 
return false; 
}); 

所以我輸出類別id錨定rel屬性,然後我添加點擊事件處理程序,其中我調用.get函數。畢竟,我輸出數據。