asignar valore a etiquetas

[Ethgar]

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:

Código (html4strict) [Seleccionar] Expandir

<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

[DanB]

Yo lo haria con JQuery.

Código (html4strict) [Seleccionar] Expandir


<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>


Código (javascript) [Seleccionar] Expandir


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

Espero haberte ayudado xD