Simple Tabs
How do I make an simple tabs?
What is a simple tabs? How do you make a simple tabs? This script and codes were developed by Gyula Szathmary on 02 November 2022, Wednesday.
Simple Tabs - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Tabs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link type="text/css" href="https://www.saxobank.com/Style%20Library/LP-template/mobile.css" rel="stylesheet" />
<link type="text/css" href="https://www.saxobank.com/Style%20Library/LP-template/universal.css" rel="stylesheet" />
<link type="text/css" href="https://www.saxobank.com/Style%20Library/LP-template/desktop.css" rel="stylesheet" />
<link type="text/css" href="https://www.saxobank.com/Style%20Library/LP-template/form.css" rel="stylesheet" />
<link type="text/css" href="https://www.saxobank.com/Style%20Library/LP-template/price-widget-dynamic.css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.saxobank.com/Style%20Library/SaxoTraderGOV3/go3-tabs-tables.css">
<div id="tabbed-webpart"> <ul class="tabs"> <li class="tab-link selected" data-tab="fx-tab">FX</li> <li class="tab-link" data-tab="cfds-tab">CFDs</li> <li class="tab-link" data-tab="stocks-tab">STOCKS & ETFs</li> <li class="tab-link" data-tab="futures-tab">FUTURES & OPTIONS</li> <li class="tab-link" data-tab="bonds-tab">BONDS</li> </ul> <div id="fx-tab" class="tab-menu-content selected"> <section class="section flex-width valign-top"> <div class="half padding"> <h2>Choose the price plan that is right for you</h2> <div class="mobile-content-spacer"></div> <ul> <li>Volume-based pricing. Trade in the most transparent and simple way with our lowest spreads</li> <li>All-inclusive pricing. Trade at competitive prices with no monthly minimums</li> </ul> </div> <div class="half padding hide-w768"> <div id="tabs-container"> <ul class="tabs-menu"> <li class="current"><a href="#tab-1">FX All-inclusive prices</a></li> <li><a href="#tab-2">FX Volume-based prices</a></li> </ul> <div class="tab"> <div id="tab-1" class="tab-content"> <iframe frameborder="0" height="277" src="http://prices-saxo.fxbluelabs.com/dom/saxo/topofbook7.html?id=SaxoActive&syms=EURUSD:EUR%20USD:fx,GBPUSD:GBP%20USD:fx,EURGBP:EUR%20GBP:fx,USDJPY:USD%20JPY:fx,EURJPY:EUR%20JPY:fx,AUDUSD:AUD%20USD:fx,EURCHF:EUR%20CHF:fx,XAUUSD:Gold%20USD:metal:cfdi" width="435"></iframe> <p>*Live indicative prices</p> <a class="linkButtonArrow" href="http://fxspreaddisplay.saxobank.com/spreaddisplayweb/fx/histm/ed0b2acf?uimode=simple&iframe=true&width=645&height=750" rel="saxoModal">See all Live and historic spreads</a> </div> <div id="tab-2" class="tab-content"> <iframe frameborder="0" height="277" src="http://prices-saxo.fxbluelabs.com/dom/saxo/topofbook7.html?id=SaxoRetail&syms=EURUSD:EUR%20USD:fx,GBPUSD:GBP%20USD:fx,EURGBP:EUR%20GBP:fx,USDJPY:USD%20JPY:fx,EURJPY:EUR%20JPY:fx,AUDUSD:AUD%20USD:fx,EURCHF:EUR%20CHF:fx,XAUUSD:Gold%20USD:metal" width="435"></iframe> <p>*Live indicative prices</p> <a class="linkButtonArrow" href="http://fxspreaddisplay.saxobank.com/SpreadDisplayWeb/Fx/Histm/b9ba953c?uimode=simple&iframe=true&width=645&height=750" rel="saxoModal">See all Live and historic spreads</a> </div> </div> </div> </div> </section> </div> <div id="cfds-tab" class="tab-menu-content"> <section class="section flex-width valign-top"> <div class="half padding"> <h2>Transparent and competitive prices</h2> <div class="mobile-content-spacer"></div> <ul> <li>Now you can trade CFDs as low as 6 USD per trade*</li> <li>Our range comprises more than 9,000 CFDs</li> <li>Including indices, stocks, commodities and more</li> <li>Benefit from extended trading hours on all major stock indices</li> </ul> </div> <div class="half padding hide-w768"> <table cellpadding="0" cellspacing="0" style="border-collapse: initial!important; margin-bottom: 18px; padding:30px;" width="90%"> <tbody> <tr> <td width="40%" class="cfd-pricing-table-header" style="background-color:#fff; color:#002956;">Rates & conditions</td> <td class="cfd-pricing-table-header middle" style="background-color:#50c9f3; color:#002956;">Standard</td> <td class="cfd-pricing-table-header" style="color:#50c9f3;">Active*</td> </tr> <tr> <td class="cfd-pricing-table-title" colspan="3"> <span>STOCKS & CFDs - Commission from</span> </td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/usa.jpg" alt=""> <span>NASDAQ & NYSE</span> </td> <td class="cfd-pricing-table-item middle">2 cps (min. 20 USD)</td> <td class="cfd-pricing-table-item">6.00 USD </td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/uk.jpg" alt=""> <span>London Stock Exchange</span> </td> <td class="cfd-pricing-table-item middle">0.10% (min. 8 GBP)</td> <td class="cfd-pricing-table-item">5.00 GBP</td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/germany.jpg" alt=""> <span>Deutsche Börse (XETRA)</span></td> <td class="cfd-pricing-table-item middle">0.12% (min. 12 EUR)</td> <td class="cfd-pricing-table-item">9.00 EUR </td> </tr> <tr> <td class="cfd-pricing-table-title" colspan="3"> <span>CFD Index Trackers</span> </td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/usa.jpg" alt=""> <span>US 500</span> </td> <td class="cfd-pricing-table-item middle">0.90</td> <td class="cfd-pricing-table-item">0.40</td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/uk.jpg" alt=""> <span>UK 100</span> </td> <td class="cfd-pricing-table-item middle">1.00</td> <td class="cfd-pricing-table-item">0.85</td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/germany.jpg" alt=""> <span>Germany 30</span></td> <td class="cfd-pricing-table-item middle">1.50</td> <td class="cfd-pricing-table-item">1.00</td> </tr> <tr class="__web-inspector-hide-shortcut__"> <td class="cfd-pricing-table-title" colspan="3" style="background:none!important; border: none;">*Examples of lowest local market pricing – please check applicable Active pricing for your market <a href="#">here</a></td> </tr> </tbody> </table> </div> </section> </div> <div id="stocks-tab" class="tab-menu-content"> <section class="section flex-width valign-top"> <div class="half padding"> <h2>Transparent and competitive prices</h2> <div class="mobile-content-spacer"></div> <ul> <li>Now you can trade Stocks and ETFs as low as 6 USD per trade*</li> <li>Access over 19,000 Stocks and ETFs across 36 exchanges</li> <li>Benefit from high execution quality with Smart Order Routing</li> <li>Use stock positions as collateral for margin trading</li> </ul> </div> <div class="half padding hide-w768"> <table cellpadding="0" cellspacing="0" style="border-collapse: initial!important;margin-bottom: 18px; padding:30px" width="90%"> <tbody> <tr> <td width="40%" class="cfd-pricing-table-header" style="background-color:#fff; color:#002956;">Rates & conditions</td> <td class="cfd-pricing-table-header middle" style="background-color:#50c9f3; color:#002956;">Standard</td> <td class="cfd-pricing-table-header" style="color:#50c9f3;">Active*</td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/usa.jpg" alt=""> <span>NASDAQ & NYSE</span> </td> <td class="cfd-pricing-table-item middle">2 cps (min. 20 USD)</td> <td class="cfd-pricing-table-item">6.00 USD </td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/uk.jpg" alt=""> <span>London Stock Exchange</span> </td> <td class="cfd-pricing-table-item middle">0.10% (min. 8 GBP)</td> <td class="cfd-pricing-table-item">5.00 GBP</td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/germany.jpg" alt=""> <span>Deutsche Börse (XETRA)</span></td> <td class="cfd-pricing-table-item middle">0.12% (min. 12 EUR)</td> <td class="cfd-pricing-table-item">9.00 EUR </td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/switzerland.jpg" alt=""> <span>SIX Swiss Exchange</span> </td> <td class="cfd-pricing-table-item middle">0.10% (min. 18 CHF)</td> <td class="cfd-pricing-table-item">from 11 CHF</td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/italy.jpg" alt=""> <span>Milan Stock Exchange</span> </td> <td class="cfd-pricing-table-item middle">0.10% (min 12 EUR)</td> <td class="cfd-pricing-table-item">from 9.00 EUR</td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/france.jpg" alt=""> <span>NYSE Euronext Paris</span></td> <td class="cfd-pricing-table-item middle">0.10% (min 12 EUR)</td> <td class="cfd-pricing-table-item">from 9.00 EUR</td> </tr> <tr> <td class="cfd-pricing-table-item"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/spain.jpg" alt=""> <span>BME Spanish Exchanges</span></td> <td class="cfd-pricing-table-item middle">0.10% (min 12 EUR)</td> <td class="cfd-pricing-table-item">from 9.00 EUR</td> </tr> <tr class="__web-inspector-hide-shortcut__"> <td class="cfd-pricing-table-title" colspan="3" style="background:none!important; border: none;">*Examples of lowest local market pricing – please check applicable Active pricing for your market <a href="#">here</a></td> </tr> </tbody> </table> </div> </section></div> <div id="futures-tab" class="tab-menu-content"> <section class="section flex-width valign-top"> <div class="half padding"> <h2>Flexibility for Futures and Options traders</h2> <div class="mobile-content-spacer"></div> <h3>Futures:</h3> <ul> <li>Precise and fast execution on 23 global exchanges</li> <li>Ability to trade intra-day and inter-market spreads</li> </ul> <h3>Options:</h3> <ul> <li>Access to Index, Futures & Equity Options around the globe</li> <li>Innovative tools to build your own strategies without compromising your risk controls</li> </ul> <p><i>Low commisions and no broker assisted fees.</i></p> </div> <div class="half padding hide-w768"> <div id="tabs-container2"> <ul class="tabs-menu2"> <li class="current"><a href="#tab-3">Futures (example)</a></li> <li><a href="#tab-4">Options (example)</a></li> </ul> <div class="tab"> <div id="tab-3" class="tab-content2"> <table cellpadding="0" cellspacing="0" style="border-collapse: initial!important;margin-bottom: 18px;" width="90%"> <tbody> <tr> </tr> <tr> <td width="50%" class="cfd-pricing-table-header" style="border-right: 1px solid #FFF;">Contract currency</td> <td class="cfd-pricing-table-header middle">As low as*</td> </tr> <tr> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/uk.jpg" alt=""> <span>GBP</span> </td> <td class="cfd-pricing-table-item middle" style="text-align:center;">1.25</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/eu.jpg" alt=""> <span>EUR</span> </td> <td class="cfd-pricing-table-item middle" style="text-align:center;">1.50</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/usa.jpg" alt=""> <span>USD</span></td> <td class="cfd-pricing-table-item middle" style="text-align:center;">1.50</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/canada.jpg" alt=""> <span>CAD</span> </td> <td class="cfd-pricing-table-item middle" style="text-align:center;">1.50</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/switzerland.jpg" alt=""> <span>CHF</span> </td> <td class="cfd-pricing-table-item middle" style="text-align:center;">2.00</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/australia.jpg" alt=""> <span>AUD</span></td> <td class="cfd-pricing-table-item middle" style="text-align:center;">2.50</td> </tr> </tbody> </table> <p><i>*Negotiable commissions with high volume.</i></p> <a href="http://www.saxobank.com/prices/futures/pages/commissions.aspx">See more details</a> </div> <div id="tab-4" class="tab-content2"> <table cellpadding="0" cellspacing="0" style="border-collapse: initial!important; margin-bottom: 18px;" width="90%"> <tbody> <tr> </tr> <tr> <td width="50%" class="cfd-pricing-table-header" style="border-right: 1px solid #FFF;">Contract currency</td> <td class="cfd-pricing-table-header middle">As low as*</td> </tr> <tr> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://uk.saxomarkets.com/PublishingImages/content-library/flag-icon/uk.jpg" alt=""> <span>GBP</span> </td> <td class="cfd-pricing-table-item middle" style="text-align:center;">1.25</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/eu.jpg" alt=""> <span>EUR</span> </td> <td class="cfd-pricing-table-item middle" style="text-align:center;">1.50</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/usa.jpg" alt=""> <span>USD</span></td> <td class="cfd-pricing-table-item middle" style="text-align:center;">1.50</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/canada.jpg" alt=""> <span>CAD</span> </td> <td class="cfd-pricing-table-item middle" style="text-align:center;">1.50</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/switzerland.jpg" alt=""> <span>CHF</span> </td> <td class="cfd-pricing-table-item middle" style="text-align:center;">2.00</td> </tr> <tr> <td class="cfd-pricing-table-item" style="text-align:center;"> <img class="cfd-pricing-table-item-img" src="http://www.saxobank.com/PublishingImages/content-library/flag-icon/australia.jpg" alt=""> <span>AUD</span></td> <td class="cfd-pricing-table-item middle" style="text-align:center;">2.50</td> </tr> </tbody> </table> <p><i>*Negotiable commissions with high volume.</i></p> <a href="http://www.saxobank.com/prices/contract-options/pages/commissions.aspx">See more details</a> </div> </div> </div> </div> </section></div> <div id="bonds-tab" class="tab-menu-content"> <section class="section flex-width valign-top"> <div class="half padding"> <h2>Your global hub for Bond trading*</h2> <div class="mobile-content-spacer"></div> <ul> <li>Trade Bonds as low as 0.08%</li> <li>Global access to all relevant Bond markets</li> <li>Trade Bonds in more than 20 currencies</li> <li>Possibility to use Bonds as collateral for leveraged trading</li> </ul> <p><i>*Bonds are currently traded offline</i></p> </div> <div class="half align-center hide-w768"> <img src="http://www.saxobank.com/Style%20Library/SaxoTraderGOV3/SaxoBank_HQ_01.png" alt="right image all the way to edge" style="padding-right: 100px; padding-top: 30px;"/> </div> </section></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple Tabs - Script Codes CSS Codes
#tabbed-webpart ul.tabs { margin: 0px; padding: 0px; list-style: none; text-align: center; background: #43c9f5; } #tabbed-webpart ul.tabs li { color: #001125; display: inline-block; padding: 10px 55px; cursor: pointer; background: #43c9f5; position: relative; } #tabbed-webpart ul.tabs li:hover { background-position: -1000px 0; background-color: #43c9f5; } #tabbed-webpart li.tab-link.selected { font-weight: bold; } #tabbed-webpart li.selected::after { color: #222222; content: ""; position: absolute; bottom: -15px; left: 50%; margin-left: -15px; border-width: 15px 15px 0; border-style: solid; border-color: #43c9f5 transparent; display: block; width: 0; } #tabbed-webpart .tab-menu-content { display: none; padding: 15px; } #tabbed-webpart .tab-menu-content.selected { display: inherit; }
Simple Tabs - Script Codes JS Codes
$('#tabbed-webpart ul.tabs li').click(function() { var tab_id = $(this).attr('data-tab'); $('#tabbed-webpart ul.tabs li').removeClass('selected'); $('#tabbed-webpart .tab-menu-content').removeClass('selected'); $(this).addClass('selected'); $("#" + tab_id).addClass('selected');
});
$(document).ready(function() { $(".tabs-menu a").click(function(event) { event.preventDefault(); $(this).parent().addClass("current"); $(this).parent().siblings().removeClass("current"); var tab = $(this).attr("href"); $(".tab-content").not(tab).css("display", "none"); $(tab).fadeIn(); });
});
$(document).ready(function() { $(".tabs-menu2 a").click(function(event) { event.preventDefault(); $(this).parent().addClass("current"); $(this).parent().siblings().removeClass("current"); var tab = $(this).attr("href"); $(".tab-content2").not(tab).css("display", "none"); $(tab).fadeIn(); });
});
Developer | Gyula Szathmary |
Username | gyusza |
Uploaded | November 02, 2022 |
Rating | 3 |
Size | 5,071 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Comparison table SC | 2,028 Kb |
Monthly Product Update v2 | 5,799 Kb |
Compare resources on mobile sites | 3,226 Kb |
Navigate to coordinates from link in google maps | 1,805 Kb |
Rotating Outrageous Predictions 2016 | 14,585 Kb |
Modular LP Test | 8,437 Kb |
Webinar v2 | 2,868 Kb |
A Pen by Gyula Szathmary | 5,177 Kb |
Slimscroll | 4,090 Kb |
Simple Tabs | 5,071 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Material design buttons | Fischaela | 4,381 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Bubble animation | Ftabor | 6,565 Kb |
Tree growth tests | Orchard | 3,818 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!