如何更新Bootstrap tabpanel中的内容

Question

这是我在本网站的第一个问题，我需要一些帮助。

我正在创建一个社交网络，facebook就像样式，我有一个tabpanel，在bootstrap中有2个标签，第一个标签是“Friends”，其中将显示朋友的内容，第二个标签不如拳头那么重要一个被称为“主页”，其中将放置来自用户的所有帖子。

在第一个标签中，我需要重新加载内容，通过点击此标签，必须显示来自朋友的所有新帖子。 （我已经这样做了）。 它现在通过刷新所有页面或F5来工作。但我不知道如何做到这一切。

如果代码有帮助，我在这里粘贴html代码：                                                       

                <li role="presentation" class="active">
                  <a data-toggle="tab" role="tab" aria-controls="friends" href="#friends">
                    <i class="fa fa-user">
                      Friends
                    </i>

                  </a>
                </li>

                <li role="presentation">
                  <a data-toggle="tab" role="tab" aria-controls="home" href="#home">
                    <i class="fa fa-home">
                      Home
                    </i>

                  </a>
                </li>
              </ul>
              <div class="tab-content">
                <div id="friends" class="tab-pane active" role="tabpanel">
                  <p>
                    Friends
                  </p>

                  <p>
                    <?php ListFPosts($id_user);?>
                  </p>
                </div>

                <div id="home" class="tab-pane active" role="tabpanel">
                  <p>
                    Home
                  </p>

                  <p>
                    <?php ListMyPosts($id_user);?>
                  </p>
                </div>
              </div>
            </div>

我已经阅读了很多，我认为我需要Ajax而且我还不懂这种语言，有人可以帮助我吗？

请帮忙吗？

提前谢谢。