Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- body {
- font: 14px 'PT Sans', sans-serif;
- }
- .tabs_box p {
- margin: 10px 0;
- }
- .tabs_box table{
- margin: auto;
- }
- .tabs_box table td{
- text-align:center;
- }
- .tabs_box {
- width: 50%;
- background: #fff;
- position: absolute;
- left: 26%;
- box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
- }
- #tab2, #tab3 {
- display: none;
- }
- /* .tab {
- padding: 0 10px;
- }
- */
- .tabs_menu {
- display: table-row;
- }
- .tabs_menu li {
- display: table-cell;
- width: auto;
- }
- .tabs_menu li a {
- display: table-cell;
- width: 2000px;
- text-align: center;
- text-decoration: none;
- background: #f8f8f8;
- color: #292929;
- border-bottom: 1px solid #ccc;
- border-left: 1px solid #ccc;
- padding: 10px 0;
- }
- .tabs_menu li:first-child a {
- border-left: 0;
- }
- .tabs_menu .active {
- background: #5f84c1;
- color: #fff;
- }
- .simple-little-table {
- font-family:Arial, Helvetica, sans-serif;
- color:#666;
- font-size:12px;
- text-shadow: 1px 1px 0px #fff;
- background:#eaebec;
- margin:20px;
- border:#ccc 1px solid;
- border-collapse:separate;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- border-radius:3px;
- -moz-box-shadow: 0 1px 2px #d1d1d1;
- -webkit-box-shadow: 0 1px 2px #d1d1d1;
- box-shadow: 0 1px 2px #d1d1d1;
- }
- .simple-little-table th {
- font-weight:bold;
- padding:21px 25px 22px 25px;
- border-top:1px solid #fafafa;
- border-bottom:1px solid #e0e0e0;
- background: #ededed;
- background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
- background: -moz-linear-gradient(top, #ededed, #ebebeb);
- }
- .simple-little-table th:first-child{
- text-align: left;
- padding-left:20px;
- }
- .simple-little-table tr:first-child th:first-child{
- -moz-border-radius-topleft:3px;
- -webkit-border-top-left-radius:3px;
- border-top-left-radius:3px;
- }
- .simple-little-table tr:first-child th:last-child{
- -moz-border-radius-topright:3px;
- -webkit-border-top-right-radius:3px;
- border-top-right-radius:3px;
- }
- .simple-little-table tr{
- text-align: center;
- padding-left:20px;
- }
- .simple-little-table tr td:first-child{
- text-align: left;
- padding-left:20px;
- border-left: 0;
- }
- .simple-little-table tr td {
- padding:18px;
- border-top: 1px solid #ffffff;
- border-bottom:1px solid #e0e0e0;
- border-left: 1px solid #e0e0e0;
- background: #fafafa;
- background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
- background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
- }
- .simple-little-table tr:nth-child(even) td{
- background: #f6f6f6;
- background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
- background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
- }
- .simple-little-table tr:last-child td{
- border-bottom:0;
- }
- .simple-little-table tr:last-child td:first-child{
- -moz-border-radius-bottomleft:3px;
- -webkit-border-bottom-left-radius:3px;
- border-bottom-left-radius:3px;
- }
- .simple-little-table tr:last-child td:last-child{
- -moz-border-radius-bottomright:3px;
- -webkit-border-bottom-right-radius:3px;
- border-bottom-right-radius:3px;
- }
- .simple-little-table tr:hover td{
- background: #f2f2f2;
- background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
- background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
- }
- .simple-little-table a:link {
- color: #666;
- font-weight: bold;
- text-decoration:none;
- }
- .simple-little-table a:visited {
- color: #999999;
- font-weight:bold;
- text-decoration:none;
- }
- .simple-little-table a:active,
- .simple-little-table a:hover {
- color: #bd5a35;
- text-decoration:underline;
- }
- /*second*/
- .t_box{
- width:100%;
- background:#fff;
- position: inherit;
- top: 100px;
- left: 50%;
- }
- #t2, #t3, #t4, #t5{
- display: none !important;
- }
- /*.t{
- padding: 0 10px;
- }*/
- .t_menu{
- display: table-row;
- }
- .t_menu li{
- display: table-cell;
- }
- .t_menu li a{
- display: table-cell;
- width: 2000px;
- text-align: center;
- text-decoration: none;
- background: #f8f8f8;
- color: #292929;
- border-bottom: 1px solid #ccc;
- border-left: 1px solid #ccc;
- padding: 10px 0;
- }
- .t_menu li:first-child a{
- border-left:0;
- }
- .t_menu .act{
- background: #5f84c1;
- color:white;
- }
- </style>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <!-- Переключаємо вкладки-->
- <script>
- $(document).ready(function(){
- $('.tabs_menu a').click(function(e){//при кліку на лінк в меню
- e.preventDefault();//відмініяємо стандартну поведінку
- $('.tabs_menu .active').removeClass('active');// видаляємо з поточної клас active
- $(this).addClass('active');//додаємо клас active до туди де був зроблений клік
- var tab = $(this).attr('href');//отримуємо href, щоб знати який контент показати
- $('.tab').not(tab).css({'display':'none'});// усі інші виключаємо
- $(tab).fadeIn(400);//для плавного перемикання
- });
- });
- </script>
- <!-- Переключаємо підменю-->
- <script>
- $(document).ready(function(){
- $('.t_menu a').click(function(a){ //при кліку на лінк в меню
- a.preventDefault();//відмініяємо стандартну поведінку
- $('.t_menu .act').removeClass('act');// видаляємо з поточної клас act
- $(this).addClass('act'); //додаємо клас act до туди де був зроблений клік
- var tab = $(this).attr('href');//отримуємо href, щоб знати який контент показати
- $('.t').not(tab).css({'display':'none'});// усі інші виключаємо
- $(tab).fadeIn(400);//для плавного перемикання
- });
- });
- </script>
- </head>
- <body>
- <div class="tabs_box">
- <ul class="tabs_menu">
- <li><a href="#tab1" class="active">Banks<br><i class="fa fa-university fa-1"></i></a></li>
- <li><a class="" href="#tab2">Calculator<br><i class="fa fa-calculator fa-1"></i></a></li>
- <li><a class="" href="#tab3">Cards<br><i class="fa fa-credit-card fa-1"></i></a></li>
- </ul>
- <div style="" class="tab" id="tab1"><!--Banks-->
- <div class="t_box"><!--Підменю-->
- <ul class="t_menu">
- <li><a href="#t1" class="act">Загальний</a></li>
- <li><a href="#t2">USD</a></li>
- <li><a href="#t3">EUR</a></li>
- <li><a href="#t4">RUB</a></li>
- <li><a href="#t5">BTC</a></li>
- </ul>
- <div class="t" id="t1"><!--Загальний -->
- <table class="simple-little-table" style="margin:auto;width:100%;"><!-- Загальний курс-->
- <thead>
- <tr>
- <th>Валюта</th>
- <th>Купівля</th>
- <th>Продаж</th>
- <th>НБУ</th>
- </tr>
- </thead>
- <tr>
- <td>USD</td>
- <td>text3</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>EUR</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>RUB</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>BTC</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- </table><!-- Кінець Загальний курс-->
- </div>
- <div class="t" id="t2"><!--USD -->
- <table class="simple-little-table" style="margin:auto;width:100%;">
- <thead>
- <tr>
- <th colspan="2">Банк</th>
- <th>Купівля </th>
- <th>Продаж</th>
- </tr>
- </thead>
- <tr>
- <td>img</td>
- <td>bankadata_select_fr("bank_name","id=1")</td>
- <td>bankadata_select_fr("bank_name","id=2")</td>
- <td>bankadata_select_fr("bank_name","id=3")</td>
- <td> bankadata_select_fr("bank_name","id=4")</td>
- <td> bankadata_select_fr("bank_name","id=5")</td>
- </tr>
- <tr>
- <td>EUR</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>RUB</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>BTC</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- </table>
- </div><!--end USD -->
- <div class="t" id="t3"><!--EUR -->
- <table class="simple-little-table" style="margin:auto;width:100%;">
- <thead>
- <tr>
- <th colspan="2">Банк</th>
- <th>Купівля </th>
- <th>Продаж</th>
- </tr>
- </thead>
- <tr>
- <td>img</td>
- <td>text3</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>EUR</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>RUB</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>BTC</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- </table>
- </div><!--end EUR -->
- <div class="t" id="t4"><!--RUB -->
- <table class="simple-little-table" style="margin:auto;width:100%;">
- <thead>
- <tr>
- <th colspan="2">Банк</th>
- <th>Купівля </th>
- <th>Продаж</th>
- </tr>
- </thead>
- <tr>
- <td>img</td>
- <td>text4</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>EUR</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>RUB</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>BTC</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- </table>
- </div><!--end RUB -->
- <div class="t" id="t5"><!--BTC -->
- <table class="simple-little-table" style="margin:auto;width:100%;">
- <thead>
- <tr>
- <th colspan="2">Банк</th>
- <th>Купівля </th>
- <th>Продаж</th>
- </tr>
- </thead>
- <tr>
- <td>img</td>
- <td>text5</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>EUR</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>RUB</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- <tr>
- <td>BTC</td>
- <td>text</td>
- <td>text</td>
- <td>text</td>
- </tr>
- </table>
- </div><!--end BTC -->
- </div><!-- кінець підменю-->
- </div>
- <div style="display: none;" class="tab" id="tab2">
- <p>text2</p>
- </div>
- <div style="display: none;" class="tab" id="tab3">
- <p>text3</p>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement