hanamizuki/A Simple jQuery Tabs

## A Simple jQuery Tabs
<html>
  <head>
    <title>
      A Simple jQuery Tabs
    </title>
  </head>
  <body>
    <div id="wrap">
      <div id="nav" class="hana-tab-nav">
        <ul>
          <li>
            <a href="#grid">
              Grid
            </a>
          </li>
          <li>
            <a href="#teaser">
              Teaser
            </a>
          </li>
        </ul>
      </div>
      <div id="content" class="hana-tab-content">
        <div id="grid" class="hana-tab-block">
          dude this is the grid block
        </div>
        <div id="teaser" class="hana-tab-block">
          sweet this is the teaser block
        </div>
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
      ( function ( $ ){
        var toggle = function ( $links, $blocks, $this_link, $this_block ){
          $links.removeClass( 'hana-tab-nav-selected' );
          $this_link.addClass( 'hana-tab-nav-selected' );
          $blocks.hide();
          $this_block.show();
        };

        $.fn.hana_tab = function ( opt ){
          return this.each( function (){
            var $links      = $( this ).find( 'a' );
            var $blocks     = $( '.hana-tab-block' );
            var $init_link  = $links.eq( opt.init_block );
            var $init_block = $( $init_link.attr( 'href' ));
            console.log ( $links );

            toggle( $links, $blocks, $init_link, $init_block );

            $links.click( function ( event ){
              event.preventDefault();

              var $this_link  = $( this );
              var $this_block = $( $this_link.attr( 'href' ));

              toggle( $links, $blocks, $this_link, $this_block );
            });
          });
        };
      })( jQuery );

      $( function (){
        $( '#nav' ).hana_tab({
          init_block : 0
        });
      });
    </script>
  </body>
</html>
	<html>
	<head>
	<title>
	A Simple jQuery Tabs
	</title>
	</head>
	<body>
	<div id="wrap">
	<div id="nav" class="hana-tab-nav">
	<ul>
	<li>
	<a href="#grid">
	Grid
	</a>
	</li>
	<li>
	<a href="#teaser">
	Teaser
	</a>
	</li>
	</ul>
	</div>
	<div id="content" class="hana-tab-content">
	<div id="grid" class="hana-tab-block">
	dude this is the grid block
	</div>
	<div id="teaser" class="hana-tab-block">
	sweet this is the teaser block
	</div>
	</div>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script>
	( function ( $ ){
	var toggle = function ( $links, $blocks, $this_link, $this_block ){
	$links.removeClass( 'hana-tab-nav-selected' );
	$this_link.addClass( 'hana-tab-nav-selected' );
	$blocks.hide();
	$this_block.show();
	};

	$.fn.hana_tab = function ( opt ){
	return this.each( function (){
	var $links = $( this ).find( 'a' );
	var $blocks = $( '.hana-tab-block' );
	var $init_link = $links.eq( opt.init_block );
	var $init_block = $( $init_link.attr( 'href' ));
	console.log ( $links );

	toggle( $links, $blocks, $init_link, $init_block );

	$links.click( function ( event ){
	event.preventDefault();

	var $this_link = $( this );
	var $this_block = $( $this_link.attr( 'href' ));

	toggle( $links, $blocks, $this_link, $this_block );
	});
	});
	};
	})( jQuery );

	$( function (){
	$( '#nav' ).hana_tab({
	init_block : 0
	});
	});
	</script>
	</body>
	</html>