|
|
Line 1: |
Line 1: |
| <html> | | <html> |
| <head> | | <head> |
- | <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
| |
- | <style>
| |
- | /* ---------- Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui ---------- */
| |
- | *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
| |
- | table { border-collapse:collapse; border-spacing:0 }
| |
- | fieldset, img { border:0 }
| |
- | address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
| |
- | ol, ul, li { list-style:none }
| |
- | caption, th { text-align:left }
| |
- | h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
| |
- | q:before, q:after { content:''}
| |
| | | |
- | strong { font-weight:bold }
| + | </head> |
- | em { font-style:italic }
| + | |
- | a img { border:none } /* Gets rid of IE's blue borders */
| + | |
| | | |
- | sup { font-size: 50%; }
| |
- |
| |
- | a, a:hover { text-decoration: none; }
| |
- |
| |
- |
| |
- | body {
| |
- | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
| |
- | font-weight: 100%;
| |
- | font-size: 12px;
| |
- | line-height: 1.4em;
| |
- | color: #3d3e41;
| |
- | margin: 50px 0; /* Temporary margin to push down the form */
| |
- | }
| |
- |
| |
- | #tabs {
| |
- | font-size: 90%;
| |
- | margin: 20px 0;
| |
- | width: 520px;
| |
- | margin: 0 auto;
| |
- |
| |
- | }
| |
- | #tabs ul {
| |
- | float: left;
| |
- | background: #E3FEFA;
| |
- | width: 100%;
| |
- | padding-top: 4px;
| |
- | }
| |
- | #tabs li {
| |
- | margin-left: 8px;
| |
- | list-style: none;
| |
- | }
| |
- | * html #tabs li {
| |
- | display: inline; /* ie6 double float margin bug */
| |
- | }
| |
- | #tabs li,
| |
- | #tabs li a {
| |
- | float: left;
| |
- | }
| |
- | #tabs ul li a {
| |
- | text-decoration: none;
| |
- | padding: 8px;
| |
- | color: #0073BF;
| |
- | font-weight: bold;
| |
- | }
| |
- | #tabs ul li.active {
| |
- | background: #CEE1EF url(img/nav-right.gif) no-repeat right top;
| |
- | }
| |
- | #tabs ul li.active a {
| |
- | background: url(img/nav-left.gif) no-repeat left top;
| |
- | color: #333333;
| |
- | }
| |
- | #tabs div {
| |
- | background: #CEE1EF;
| |
- | clear: both;
| |
- | padding: 20px;
| |
- | min-height: 200px;
| |
- | }
| |
- | #tabs div h3 {
| |
- | text-transform: uppercase;
| |
- | margin-bottom: 10px;
| |
- | letter-spacing: 1px;
| |
- |
| |
- | #tabs div p {
| |
- | line-height: 150%;
| |
- | }
| |
- | </style>
| |
- | </head>
| |
| <body> | | <body> |
- | <div id="tabs">
| + | <iframe src="http://files.flipsnack.com/iframe/embed.html?hash=fdc9eni5&wmode=window&bgcolor=EEEEEE&t=1413149910" width="640" height="385" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe> |
- | | + | |
- | <div id="tab-1">
| + | |
- | <h3>Tab 1</h3>
| + | |
- | <p>Some content</p>
| + | |
- | <iframe width="420" height="150" src="http://www.youtube.com/embed/0FWL8ljUSv0" frameborder="0" allowfullscreen></iframe>
| + | |
- | </div>
| + | |
- | | + | |
- | <div id="tab-2">
| + | |
- | <h3>Tab 2</h3>
| + | |
- | <p>Some content</p>
| + | |
- | <iframe width="512" height="376" src="http://video.pbs.org/viralplayer/2365298526" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" seamless></iframe>
| + | |
- | </div>
| + | |
- | | + | |
- | <div id="tab-3">
| + | |
- | <h3>Tab 3</h3>
| + | |
- | <p>Some content</p>
| + | |
- | <iframe width="420" height="150" src="http://www.youtube.com/embed/0FWL8ljUSv0" frameborder="0" allowfullscreen></iframe>
| + | |
- | </div>
| + | |
- | | + | |
- | <div id="tab-4">
| + | |
- | <h3>Tab 4</h3>
| + | |
- | <p>Some content</p>
| + | |
- | <iframe width="420" height="150" src="http://www.youtube.com/embed/0FWL8ljUSv0" frameborder="0" allowfullscreen></iframe>
| + | |
- | </div>
| + | |
- | | + | |
- | <ul>
| + | |
- | <li><a href="#tab-1">Tab One</a></li>
| + | |
- | <li><a href="#tab-2">Tab Two</a></li>
| + | |
- | <li><a href="#tab-3">Tab Three</a></li>
| + | |
- | <li><a href="#tab-4">Tab Four</a></li>
| + | |
- | </ul>
| + | |
- | | + | |
- | </div> <!-- end tabs -->
| + | |
- | | + | |
- | <script>
| + | |
- | $(document).ready(function() {
| + | |
- | | + | |
- | var $tabs = $('#tabs div');
| + | |
- | $tabs.hide();
| + | |
- | var index = Math.floor($tabs.length * Math.random());
| + | |
- | $tabs.eq(index).show();
| + | |
- | $('#tabs ul li').eq(index).addClass('active');
| + | |
- | $('#tabs ul li a').click(function() { //When any link is clicked
| + | |
- | $('#tabs ul li').removeClass('active'); // Remove active class from all links
| + | |
- | $(this).parent().addClass('active'); //Set clicked link class to active
| + | |
- | var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
| + | |
- | $('#tabs div').hide(); // Hide all divs
| + | |
- | $(currentTab).show(); // Show div with id equal to variable currentTab
| + | |
- | return false;
| + | |
- | });
| + | |
- | });
| + | |
- | </script>
| + | |
| </body> | | </body> |
| </html> | | </html> |