Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Tabs without jQuery UI

By: Javier-3VS on Dec 6th, 2012  |  syntax: PHP  |  size: 2.38 KB  |  views: 20  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  2.                        
  3.         <section class="content">
  4.                 <div class="ui-tabs">
  5.                         <div id='proy-menu' class='tabs'>
  6.                                 <ul class="tabs-nav">
  7.                                         <li ><a href="#descripcion" id="descripcionlink">DescripciĆ³n</a></li>
  8.                                         <li ><a href="#ubicacion" id="ubicacionlink">UbicaciĆ³n</a></li>
  9.                                 </ul>
  10.                         </div>
  11.  
  12.                         <div id='proy-cont' class='tabs-contentido'>
  13.                                
  14.                                 <div id='descripcion' class='contenido'>
  15.                                         <?php echo '<div class="descr">'.get('descripcion_info').'</div>'; ?>
  16.                                 </div>
  17.  
  18.                                 <div id='ubicacion' class='contenido'>
  19.                        
  20.                                         <?php
  21.                                                 flexmap_show_map(array(
  22.                                                         'center' => get('ubicacion_latitud').','.get('ubicacion_longitud'),
  23.                                                         'width' => 580,
  24.                                                         'height' => 400,
  25.                                                         'zoom' => 16,
  26.                                                         'title' => get('descripcion_nombre'),
  27.                                                         'description' => get('descripcion_ubicacion'),
  28.                                                         'directions' => 'false',
  29.                                                         'hidepanning' => 'false',
  30.                                                         'hidescale' => 'false',
  31.                                                         'maptype' => 'roadmap',
  32.                                                 ));
  33.                                         ?>
  34.                                 </div>
  35.                         </div>
  36.                 </div>
  37.         </section>
  38.                        
  39.         <script src="http://code.jquery.com/jquery-latest.js"></script>
  40.         <script>
  41.         //Tabs General
  42.         $(document).ready(function() {
  43.                 //add active class to the first li
  44.                 $('.tabs-nav li:first').addClass('active');
  45.             //hide all content classes.
  46.             $('.contenido').hide();
  47.             //show only first div content
  48.             $('.contenido:first').show();
  49.             //add the click function
  50.             $('.tabs-nav li').click(function(){
  51.                 //remove active class from previous li
  52.                 $('.tabs-nav li').removeClass('active');
  53.                 //add active class to the active li.
  54.                 $(this).addClass('active');
  55.                 //hide all content classes
  56.                 $(".contenido").hide();
  57.                 //find the href attribute of the active tab
  58.                 var activeTab = $(this).find("a").attr("href");
  59.                 //fade in the content of active tab
  60.                 $(activeTab).fadeIn(700);
  61.                 return false;
  62.             });
  63.         });
  64.         </script>
  65.  
  66.         <script>
  67.  
  68.                 jQuery(function($) {
  69.                         $('div.ui-tabs').bind('click', function(event, ui) {
  70.                             $("div.flxmap-container").each(function() {
  71.                                 var flxmap = window[this.getAttribute("data-flxmap")],
  72.                                 flxmap.redrawOnce();
  73.                             });
  74.                         });
  75.                 });
  76.  
  77.         </script>
  78.  
  79. </article>
clone this paste RAW Paste Data