API tools faq
paste
LonelyShepherd

Software company [Лаб. 3.3]

LonelyShepherd
Dec 24th, 2017
436
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 3.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Software Company</title>
  6.         <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(document).ready(function() {
  9.                 var $tabs = $(".tabs-wrapper");
  10.                 var $tabButtons = $tabs.find("button");
  11.                 var $lists = $(".tabs-content-wrapper ul");
  12.                 var $panels = $(".panel");
  13.                
  14.                 function showContent(el) {
  15.                     if(el.is("button")) {
  16.                         $lists.hide();
  17.                         $tabButtons.removeClass("active");
  18.                         el.addClass("active");
  19.                         $lists.eq(el.index()).show();
  20.                     }
  21.                 }
  22.                
  23.                 $tabs.on("click", function(e) {
  24.                     showContent($(e.target));
  25.                 });
  26.  
  27.                 $panels.on("click", function() {
  28.                     $(this).toggleClass("active-panel");
  29.                     if($(this).hasClass("active-panel"))
  30.                         $(this).next("div").slideDown();
  31.                     else $(this).next("div").slideUp();
  32.                 });
  33.             });
  34.         </script>
  35.         <style type="text/css">
  36.             body {width: 100%;}
  37.             button {border: none; background: transparent; outline: none;}
  38.             ul {padding: 0; list-style: none; margin: 0;}
  39.             .tabss {float: left; width: 560px;}
  40.             .tabs-wrapper {box-sizing: border-box; width: 100%; background-color: #ffdc2b; border: 1px solid dimgray; border-bottom: none; float: left;}
  41.             .tabs-wrapper span {margin-left: 30px; font-style: italic; display: block;}
  42.             .tabs-wrapper button {cursor: pointer; width: 139.51px; padding: 5px; margin-right: 0; background-color: lightyellow; border-right: 1px solid dimgray; font-style: italic; float: left;}
  43.       button.active { background: palegreen; font-weight: bold; }
  44.       .tabs-wrapper button:last-child {border: none;}
  45.       .tabs-content-wrapper {box-sizing: border-box; width: 100%; height: 200px; border: 1px solid dimgray; padding: 10px; background-color: lightskyblue; clear: both;}
  46.       .tabs-content-wrapper ul:not(:first-child) { display: none; }
  47.       .accordion {width: 200px; float: left; border: 1px solid #aaa; border-top: none; margin-left: 20px;}
  48.             .accordion h1 {font-style: italic; margin-left: 5px; padding: 0;}
  49.             .panel {background-color: lightyellow; border-top: 1px solid #aaa; padding: 5px 10px; font-style: italic; cursor: pointer;}
  50.             .panel + div {padding: 10px; border-top: 1px solid #aaa; display: none; background: lightskyblue;}
  51.             .active-panel {font-weight: bold; background: lightgreen;}
  52.         </style>
  53.     </head>
  54.     <body>
  55.         <div class="tabss">
  56.             <div class="tabs-wrapper">
  57.                 <button class="active">Медицина</button>
  58.                 <button>Образование</button>
  59.                 <button>Сметководство</button>
  60.                 <button>Игри</button>
  61.             </div>
  62.             <div class="tabs-content-wrapper">
  63.                 <ul>
  64.                     <li>MedIm</li>
  65.                     <li>MedIA</li>
  66.                     <li>FINKI-Med</li>
  67.                 </ul>
  68.                 <ul>
  69.                     <li>FINKI-Edu</li>
  70.                     <li>Edu-Buddy</li>
  71.                     <li>FINKI-LE</li>
  72.                     <li>FINKI-Math</li>
  73.                 </ul>
  74.                 <ul>
  75.                     <li>eTax</li>
  76.                     <li>FINKI-Tax</li>
  77.                     <li>Tax-All</li>
  78.                     <li>mySalary</li>
  79.                 </ul>
  80.                 <ul>
  81.                     <li>FINKI-game</li>
  82.                     <li>Grelima</li>
  83.                     <li>Edaolith</li>
  84.                     <li>Foessa</li>
  85.                     <li>Jeroen</li>
  86.                 </ul>
  87.             </div>
  88.         </div>
  89.         <div class="accordion">
  90.             <div class="panel">Тим</div>
  91.             <div>
  92.                 <ul>
  93.                     <li>Алберт Ајнштајн</li>
  94.                     <li>Ален Тјуринг</li>
  95.                     <li>Архимед</li>
  96.                 </ul>
  97.             </div>
  98.             <div class="panel">Претставништва</div>
  99.             <div>
  100.                 <ul>
  101.                     <li>Скопје</li>
  102.                     <li>Прилеп</li>
  103.                     <li>Велес</li>
  104.                 </ul>
  105.             </div>
  106.             <div class="panel">Контакт</div>
  107.             <div>
  108.                 Ул. Есенска 24/5 1000 Скопје<br>
  109.                 +38921234567<br>
  110.                 [email protected]
  111.             </div>
  112.         </div>
  113.     </body>
  114. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!