Загрузка новой страницы в вкладках с помощью twitter bootstrap

Привет, я использую следующий код для создания макета с вкладками, используя twitter bootstrap

<ul class="nav nav-tabs" >
   <li class="active"><a href="#"  data-toggle="tab">Request Audit</a></li>
   <li><a href="#" data-toggle="tab">status</a></li>
   <li><a href="#" data-toggle="tab">Settings</a></li>
   <li><a href="#" data-toggle="tab">Help</a></li>
</ul>

теперь во всех вкладках мне нужна другая страница для загрузки. Поэтому я хочу сделать это:

<ul class="nav nav-tabs" >
       <li class="active"><a href="#"  data-toggle="tab">Home</a></li>
       <li><a href="status.html" data-toggle="tab">status</a></li>
       <li><a href="settings.html" data-toggle="tab">Settings</a></li>
       <li><a href="help.html" data-toggle="tab">Help</a></li>
</ul>

Я не хочу загружать контент с одной страницы на всех вкладках, а выше код не загружает новую страницу. Пожалуйста, помогите..

update:

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#audit">Request Audit</a></li>
  <li><a href="#status">status</a></li>
  <li><a href="#settings">Settings</a></li>
  <li><a href="#help">Help</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="audit">
    <p>audit</p>
  </div>
  <div class="tab-pane" id="status">
     <p>status</p>
  </div>
  <div class="tab-pane" id="settings">
      <p>settings</p>
  </div>
  <div class="tab-pane" id="help">
      <p>help</p>
  </div>
</div>

Я добавил этот script

<script>  

   $('#myTab a[href="#status"]').click(function (e) {
         e.preventDefault();
         $(this).tab('show');
         $('#status').load('status.html');
   });
</script>

Ответ 1

Существует несколько способов сделать это, но прежде чем решить, какой из них использовать, я хочу убедиться, что вы действительно хотите откусить свои файлы. Что мешает вам просто размещать содержимое внутри вкладок на странице так, как есть?

Если нет, почему бы не использовать PHP?

Если вы решите придерживаться своего текущего плана, то, как я выполнил бы то, что вы хотите сделать, будет через jQuery и AJAX.

Сначала вы хотите убедиться, что используете правильную структуру Bootstrap - ознакомьтесь с разделом Tabbable Nav и сделайте вкладки разметки соответствующими пустым областям содержимого

       <div class="tabbable" style="margin-bottom: 18px;">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Request Audit</a></li>
            <li class=""><a href="#tab2" data-toggle="tab">Status</a></li>
            <li class=""><a href="#tab3" data-toggle="tab">Settings</a></li>
            <li class=""><a href="#tab4" data-toggle="tab">Help</a></li>
          </ul>
          <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
            <div class="tab-pane active" id="tab1">
              <p>Placeholder 1</p>
            </div>
            <div class="tab-pane" id="tab2">
              <p>Placeholder 2</p>
            </div>
            <div class="tab-pane" id="tab3">
              <p>Placeholder 3</p>
            </div>
            <div class="tab-pane" id="tab4">
              <p>Placeholder</p>
            </div>
          </div>
        </div>

Затем используйте jQuery.load, чтобы заполнить tab-panes!

$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');

Ответ 2

Просто удалите вкладку data-toggle = "

например: на домашней странице:

<ul class="nav nav-tabs" >
       <li class="active"><a href="#" >Home</a></li>
       <li><a href="status.html" >status</a></li>
       <li><a href="settings.html" >Settings</a></li>
       <li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
     <div class="tab-pane active" id="tab1">
         <p>Home Page content 1</p>
     </div>
</div>

На странице status.html:

<ul class="nav nav-tabs" >
       <li ><a href="#" >Home</a></li>
       <li class="active"><a href="status.html" >status</a></li>
       <li><a href="settings.html" >Settings</a></li>
       <li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
     <div class="tab-pane active" id="tab1">
         <p>status content 1</p>
     </div>
</div>

Плохая вещь - это просто копия кодов навигационных вкладок