Simple Tabs

Developer
Gyula Szathmary
Size
5,071 Kb
Views
10,120
  1. Simple Tabs Previews
  2. Simple Tabs HTML Codes
  3. Simple Tabs CSS Codes
  4. Simple Tabs JS Codes

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 Previews
IQ Test

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&amp;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&amp;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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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(); });
});
Simple Tabs - Script Codes
Simple Tabs - Script Codes
Home Page Home
Developer Gyula Szathmary
Username gyusza
Uploaded November 02, 2022
Rating 3
Size 5,071 Kb
Views 10,120
Do you need developer help for Simple Tabs?

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!

Gyula Szathmary (gyusza) Script Codes
Name
Rotating Outrageous Predictions 2016
Slimscroll
Webinar v5 Style
Pricing widget generator project
A Pen by Gyula Szathmary
Compare resources on mobile sites
Webinar v2
Monthly Product Update v2
Replace text string jQuery
Saxo Tools Collection
Create amazing art & images with AI!

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!