Team:Hong Kong HKUST/astrid

From 2014.igem.org

(Difference between revisions)

Revision as of 13:57, 23 September 2014

HTML5 jQuery Tabs

Tab1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget sollicitudin nibh. Duis semper, diam sed iaculis dictum, libero erat molestie dui, ac suscipit felis leo sed ipsum.

Tab2

Donec pellentesque sapien neque, ac lobortis erat facilisis quis. Praesent faucibus arcu eros. Proin id tortor euismod, vulputate neque id, placerat nunc.

Tab3

Duis justo mi, egestas euismod placerat a, eleifend vitae lacus. Integer non odio nec libero lacinia vulputate. Phasellus ante lectus, congue vel volutpat vitae, dictum quis est.

Tab4

Nulla varius sit amet augue vel consequat. Aenean faucibus vehicula interdum. Integer eleifend, lectus eget vulputate feugiat, nibh nulla congue ipsum, eu mattis tortor nulla vitae diam. Maecenas rutrum risus non libero ullamcorper, nec vehicula sapien tincidunt.

Tab5

Suspendisse vulputate ornare dui, sed luctus est mattis nec. Curabitur ut dolor eleifend, vulputate purus et, ullamcorper tortor. In posuere ultricies lectus. Vestibulum vitae odio ut est sagittis porta.

@@ Line 24: / Line 24: @@
      float: left;}
-.tabs a{
-  cursor: pointer;
-  padding: 5px;
-  background: #fff;
-  color: #000;
-  border: 1px solid #666;
-  border-bottom: 0;
-}
-.tabs a:hover, .tabs a.active{
-  background: #666;
-  color: #fff;
-}
-.tabContent{
-  border: 1px solid #aaa;
-  margin: 4px 0;
-  padding: 5px;
-}
 </style>
@@ Line 63: / Line 46: @@
 	</script>
-<script>
-;(function($){
-  $.fn.html5jTabs = function(options){
-    return this.each(function(index, value){
-      var obj = $(this),
-      objFirst = obj.eq(index),
-      objNotFirst = obj.not(objFirst);
-      $("#" +  objNotFirst.attr("data-toggle")).hide();
-      $(this).eq(index).addClass("active");
-      obj.click(function(evt){
-        toggler = "#" + obj.attr("data-toggle");
-        togglerRest = $(toggler).parent().find("div");
-        togglerRest.hide().removeClass("active");
-        $(toggler).show().addClass("active");
-        $(this).parent("div").find("a").removeClass("active");
-$(this).addClass("active");
-        return false;
-      });
-    });
-  };
-}(jQuery));
-$(function() {
-  $(".tabs a").html5jTabs();
-});</script>
-<script>
-$(document).ready(function() {
-  $(".tabs a").html5jTabs();
-});</script>
@@ Line 211: / Line 155: @@
 <meta charset=utf-8 />
 <title>HTML5 jQuery Tabs</title>
+<style id="jsbin-css">
+.tabs a{
+  cursor: pointer;
+  padding: 5px;
+  background: #fff;
+  color: #000;
+  border: 1px solid #666;
+  border-bottom: 0;
+}
+.tabs a:hover, .tabs a.active{
+  background: #666;
+  color: #fff;
+}
+.tabContent{
+  border: 1px solid #aaa;
+  margin: 4px 0;
+  padding: 5px;
+}
+</style>
+</head>
 <body>
    <div class="tabs">
@@ Line 247: / Line 212: @@
 </div>
+<script id="jsbin-javascript">
+;(function($){
+  $.fn.html5jTabs = function(options){
+    return this.each(function(index, value){
+      var obj = $(this),
+      objFirst = obj.eq(index),
+      objNotFirst = obj.not(objFirst);
+      $("#" +  objNotFirst.attr("data-toggle")).hide();
+      $(this).eq(index).addClass("active");
+      obj.click(function(evt){
+        toggler = "#" + obj.attr("data-toggle");
+        togglerRest = $(toggler).parent().find("div");
+        togglerRest.hide().removeClass("active");
+        $(toggler).show().addClass("active");
+        $(this).parent("div").find("a").removeClass("active");
+$(this).addClass("active");
+        return false;
+      });
+    });
+  };
+}(jQuery));
+$(function() {
+  $(".tabs a").html5jTabs();
+});
+</script>
 </body>
 </html>