Skip to content

Instantly share code, notes, and snippets.

@kharakhordindemo

kharakhordindemo/index.html

Last active December 6, 2017 14:41
Show Gist options
  • Save kharakhordindemo/777d4906c01a4f00ef8f257e0b744586 to your computer and use it in GitHub Desktop.
Save kharakhordindemo/777d4906c01a4f00ef8f257e0b744586 to your computer and use it in GitHub Desktop.
Download ZIP
Вкладки
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Вкладки (Другой способ)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ratione provident fugit consequuntur tempora esse repellendus, pariatur labore quos qui.
</div>
<div id="tab2" class="tab_content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex suscipit, cupiditate voluptatum facere, quis quibusdam, velit impedit nisi veritatis explicabo cumque at. Facere blanditiis quisquam dolorum, itaque consequuntur, sequi distinctio assumenda! Nisi laboriosam fugit, aliquid esse amet itaque consequuntur ratione? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sed, consectetur ipsa impedit. Id repellat laudantium saepe veniam ratione voluptate quae quia aut quibusdam culpa omnis doloremque fugit distinctio natus quam accusamus ab commodi totam, ducimus corporis ullam. Repellendus praesentium totam quos accusantium, id facere tempora eveniet quae veniam inventore.
</div>
<div id="tab3" class="tab_content">
Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea debitis consequatur quas. Velit suscipit labore aliquam animi, repudiandae quia eaque distinctio eligendi veritatis doloribus dolorum consequatur, quas iure fugiat soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ipsa aperiam provident ex voluptas numquam sapiente delectus. Ea, temporibus, vero.
</div>
</div>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$('.tab_content').hide();
$('.tab_content:first').show();
$('.tabs li:first').addClass('active');
$('.tabs li').click(function() {
$('.tabs li').removeClass('active');
$(this).addClass('active');
$('.tab_content').hide();
var selectTab = $(this).find('a').attr("href");
$(selectTab).fadeIn(1000);
});//end click
});//end ready
</script>
</body>
</html>
Raw
style.css
/*---Сброс стилей---*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, em, font, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate; border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong,b{
font-weight:bold
}
em{
font-style:italic
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
*{
box-sizing: border-box;
}
/*---Конец сброса стилей---*/
/*---Вкладки (Другой способ)---*/
body{
font-family: "Arial", sans-serif;
}
.container{
width: 900px;
margin: 50px auto 0 auto;
}
.tabs{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
border-bottom: 1px solid #999;
}
.tabs li{
float: left;
border: 1px solid #999;
border-bottom: none;
background: #e0e0e0;
}
.tabs li a{
display: block;
padding: 10px 20px;
font-size: 16px;
color: #000;
text-decoration: none;
transition: all 0.5s;
}
.tabs li a:hover{
background: #ccc;
}
.tabs li.active,
.tabs li.active a:hover{
font-weight: bold;
background: #fff;
}
.tab_container{
border: 1px solid #999;
border-top: none;
background: #fff;
}
.tab_content{
padding: 20px;
font-size: 16px;
}
/*---Вкладки (Другой способ) конец---*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment