Foro de elhacker.net

Que tal buenas tardes, les cuento mi problema:
tengo 8 etuiquetas <a> estos si os seleccionas  te despliega un iframe con un archivo.php dentro, el asunto es que al cargar la pagina tarda mucho por que carga los 8 frames con las paginas automaticamente, lo que quiero es que al seleccionar una equiqueta le asigne un valor para despues comparar si ha sido seleccionada que habra el iframe y haga otras consultas, espero puedan ayudarme y les dejo un ejemplo de este caso:

<div class="contenedor">
      <div class="row">
        <div class="col-md-12">
            <!-- Example row of columns -->
          <ul class="nav nav-tabs">
            <li><a href="#opcion1"      data-toggle="tab">Opcion1           </a></li>
            <li><a href="#opcion2"      data-toggle="tab">Opcion2           </a></li>
            <li><a href="#opcion3"      data-toggle="tab">Opcion3           </a></li>
            <li><a href="#opcion4"      data-toggle="tab">Opcion4          </a></li>
            <li><a href="#opcion5"      data-toggle="tab">Opcion5           </a></li>
            <li><a href="#opcion6"      data-toggle="tab">Opcion6           </a></li>
            <li><a href="#opcion7"      data-toggle="tab">Opcion7          </a></li>
            <li><a href="#opcion8"      data-toggle="tab">Opcion8         </a></li>
          </ul>
        </div>
<div class=tabed-pane id=opcion1>
<div class="col-md-9">
<iframe src='archivo.php' name='visor' style='width: 100%; height: 600px; align=center'></iframe>
</div>
</div>
</div>

en este caso al seleccionar opcion1, mostrara el iframe con el archivo.php, lo que quiero es que no lo carge hasta que se seleccione opcion1:

Espero haberme explicado, saludos y Gracias!!

Mod: Obligatorio el uso de etiquetas GeSHi. El próximo post sin GeSHi se borra.
- Normas del subforo de Desarrollo Web
 http://foro.elhacker.net/desarrollo_web/normas-t407889.0.html (http://foro.elhacker.net/desarrollo_web/normas-t407889.0.html)

Yo lo haria con JQuery.

<div class="contenedor">
   <div class="row">
      <div class="col-md-12">
      <!-- Example row of columns -->
         <ul class="nav nav-tabs">
            <li><a href="#" data-toggle="tab" data-url="archivo1.php">Opcion1           </a></li>
            <li><a href="#" data-toggle="tab" data-url="archivo2.php">Opcion2           </a></li>
        </ul>
   </div>
  <div class=tabed-pane id=opcion1>
<div class="col-md-9" id="contenedor">
</div>
</div>
</div>
 

$(document).ready(function(){
   $(".nav li a").on('click',function(){
       var url = $(this).data('url');
       $("#contenedor").load(url);
   })
})
 

Espero haberte ayudado xD