选项卡式内容：左边框与上方的选项卡断开连接 - html CSS jQuery
Tabbed Content: Left Border Disconnected from Tabs Above - html CSS jQuery
我正在尝试构建可重复使用的选项卡式内容。以下内容改编自 Shay Howe 的 jQuery 教程；赶上 HTML5/CSS3 技能。
我添加了边距以进一步突出显示该问题。一切都在现场，但左垂直边框与上面 tab/s 的左侧不对齐。在 CodePen 中有效，但在 Mozilla/IE.
中实践失败
有人知道如何解决这个问题吗？
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TAB TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/main.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400">
</head>
<body>
<div class="tabs">
<ul class="tabs-nav">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div class="tabs-stage">
<div id="tab-1">
<p>Text for tab 1.</p>
</div>
<div id="tab-2">
<p>Text for tab 2.</p>
</div>
<div id="tab-3">
<p>Text for tab 3.</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="assets/script.js"></script>
</body>
</html>
CSS:
body {
MARGIN: 1.5%
color: #666;
font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.tabs {
max-width: 66.66666%;
MARGIN-LEFT: 50px
}
.tabs-nav li {
float: left;
width: 33.33333%;
list-style-type: none;
}
.tabs-nav li:first-child a {
border-right: 0;
border-top-left-radius: 6px;
}
.tabs-nav li:last-child a {
border-top-right-radius: 6px;
}
a {
background: #eaeaed;
border: 1px solid #cecfd5;
color: #0087cc;
display: block;
font-weight: 600;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
a:hover {
color: #ff7b29;
}
.tab-active a {
background: #fff;
border-bottom-color: transparent;
color: #2db34a;
cursor: default;
}
.tabs-stage {
border: 1px solid #cecfd5;
border-radius: 0px 0 6px 6px;
border-top: 0;
clear: both;
padding: 30px 30px;
position: relative;
top: 0px;
}
jQuery(jscript):
// Show the first tab by default
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');
// Change tab class and display content
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tabs-nav li').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).show();
});
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');
// Change tab class and display content
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tabs-nav li').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).show();
});
body {
MARGIN: 1.5%
color: #666;
font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.tabs {
max-width: 66.66666%;
MARGIN-LEFT: 50px
}
.tabs-nav li {
float: left;
width: 33.33333%;
list-style-type: none;
}
.tabs-nav li:first-child a {
border-right: 0;
border-top-left-radius: 6px;
}
.tabs-nav li:last-child a {
border-top-right-radius: 6px;
}
.tabs-nav {
padding-left: 0;}
a {
background: #eaeaed;
border: 1px solid #cecfd5;
color: #0087cc;
display: block;
font-weight: 600;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
a:hover {
color: #ff7b29;
}
.tab-active a {
background: #fff;
border-bottom-color: transparent;
color: #2db34a;
cursor: default;
}
.tabs-stage {
border: 1px solid #cecfd5;
border-radius: 0px 0 6px 6px;
border-top: 0;
clear: both;
padding: 30px 30px;
position: relative;
top: 0px;
}
<body>
<div class="tabs">
<ul class="tabs-nav">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div class="tabs-stage">
<div id="tab-1">
<p>Text for tab 1.</p>
</div>
<div id="tab-2">
<p>Text for tab 2.</p>
</div>
<div id="tab-3">
<p>Text for tab 3.</p>
</div>
</div>
</div>
尝试添加 padding-left: 0;到你的 ul class="tabs-nav"
基于 css 制作的选项卡式内容的另一个示例：已检查的伪 class 和一小段纯 JavaScript 代码。未使用 jQuery 或使用其他库。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Tabbed Content</title>
<style type="text/css">
.wrapper4 {
padding: 0;
float: left;
margin: 2%;
/*
Automatic calculation for the width of adjacent div.wrapper4 explained:
Take the whole width of the parent element and divide it by a number of
.wrapper4, then substract the .wrapper4 margin (above) multiplied by 2
(left and right margin) and substract 1% of the parent width just to be
sure to fit in.
Adjust this value manually for each .wrapper4 if you need to place them
in various regions of the page.
*/
width: calc(100% / 2 - 2% * 2 - 1%);
}
.wrapper4 > .tabs .tab, .wrapper4 > .tabbed > [type=radio] + .content, .wrapper4 > .tabs {
border: 3px solid lime;
}
.wrapper4 > .tabs {
border-top: none;
border-left: none;
border-right: none;
}
.wrapper4 > .tabs .tab {
display: inline-block;
background-color: lightGrey;
padding: 5px;
margin-bottom: -3px;/* Negating .tabs border-width */
}
.wrapper4 > .tabs .clicked{
border-bottom-color: transparent;
padding-top: 10px; /* Makes .clicked tab a bit higher (5px * 2). */
}
.wrapper4 > .tabbed > [type=radio] + .content {
padding: 10px;
border-top: none;
overflow: hidden;
}
.wrapper4 > .tabbed > [type=radio], .wrapper4 > .tabbed > :not(:checked) + .content {
display: none;
}
.wrapper4 > .tabbed > :checked + .content {
display: block;
}
.wrapper4 > .tabs :not(.clicked):hover {
background-color: darkGrey;
cursor: pointer;
}
.wrapper4 > .tabs .clicked, .wrapper4 > .tabbed > [type=radio] + .content {
background-color: pink;
}
</style>
</head>
<body>
<noscript>
<h3 style="text-align: center;"><mark>You need to enable JavaScript to see tabbed content on this page.</mark></h3>
</noscript>
<!-- First block of tabbed content. -->
<div class="wrapper4">
<nav class="tabs">
<label class="tab">Tab One</label>
<label class="tab">Tab Two</label>
<label class="tab">Tab Three</label>
</nav>
<div class="tabbed">
<!-- By default this tab is chosen using `checked' property. -->
<input type="radio" checked>
<!-- Put inside section.content any HTML content for the tab. -->
<section class="content">
<h2>Stuff for Tab One</h2>
<p>To add more tabs just put more <label class="tab"> elements with their relative <div class="tabbed"> blocks. The <mark>id</mark>, <mark>for</mark> and <mark>name</mark> attributes are added dynamically to the elements by JavaScript. For supporting fallback when JavaScript is disabled you have manually add those attributes for each radio and label element. Example:
<br>
<strong>
<label class="tab" for="tab-1">
</strong>
<br>
<strong>
<input type="radio" id="tab-1" name="the-same-for-each-block-of-tabbed-content">
</strong>
<br>
Also, you can do the same if for some reason you need your own attributes on some or all elements.
</p>
<p><em>Any number of tabs could be added on any number of blocks of tabbed content.</em></p>
</section>
</div>
<div class="tabbed">
<input type="radio">
<section class="content">
<h2>Stuff for Tab Two</h2>
<img style="float:left;" alt="Lorem Ipsum" title="Lorem Ipsum" src="data:image/png;base64,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">
<p>Sed egestas lorem mi, quis fringilla arcu fermentum pellentesque. Praesent auctor sed diam at pharetra. Vivamus a sem libero. Donec augue lorem, cursus ac sem sit amet, commodo commodo est. Ut sodales elementum ipsum, nec tempor nulla tincidunt et. Vivamus sodales pharetra nunc ut commodo. Proin sed vehicula tortor, finibus mollis ipsum. Vestibulum rutrum lobortis ligula, eu pretium sapien malesuada rhoncus. Phasellus auctor quam quis eleifend laoreet.</p>
<h3>Donec eleifend sem eu metus facilisis</h3>
<p>Nam cursus risus dignissim nunc bibendum dictum. Aliquam fermentum, odio auctor congue vulputate, dui diam mattis massa, cursus dapibus elit nulla et sem. Mauris convallis arcu at rutrum aliquam. Aenean lectus enim, faucibus a tellus sit amet, vulputate mattis augue. Donec eleifend sem eu metus facilisis, mattis porta lacus viverra. Donec tincidunt lacus vel leo mattis, sit amet auctor ligula tempus. Integer dapibus lacus a dui pellentesque, ac porttitor mi venenatis. Proin a justo at enim consequat molestie. Sed eget feugiat nulla.</p>
</section>
</div>
<div class="tabbed">
<input type="radio">
<section class="content">
<h2>Stuff for Tab Three</h2>
<p>To be continued ...</p>
</section>
</div>
</div>
<!-- Second block of tabbed content. -->
<div class="wrapper4">
<nav class="tabs">
<label class="tab">Tab One</label>
<label class="tab">Tab Two</label>
</nav>
<div class="tabbed">
<input type="radio" >
<section class="content">
<h2>Stuff for Tab One</h2>
<img style="float:right;" alt="Enjoy" title="Enjoy" src="data:image/png;base64,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">
<p><em>Enjoy )) ...</em></p>
</section>
</div>
<div class="tabbed">
<input type="radio" checked>
<section class="content">
<h2>Stuff for Tab Two</h2>
<p>This is the second block of tabbed content. Note that in this block the <strong>Tab Two</strong> is chosen by default. You can change this behaviour by moving <mark>checked</mark> default attribute on another radio input element.</p>
</section>
</div>
</div>
<!-- The script automatically sets `id' and `name' attribute for each radio
input element and `for' attribute for each its respective label in the stack.
Also, sets onclick event handling for labels, which adds or removes `clicked'
class on them.
The manually added `id' and `for' attributes are NOT overwritten. -->
<script type="text/javascript">
(function() {
var i = 0,
labels = document.querySelectorAll('.wrapper4 > .tabs .tab'),
wrapper4 = labels ? labels[i].parentElement.parentElement : false,
radios = document.querySelectorAll('.wrapper4 > .tabbed > [type="radio"]');
if (!wrapper4 || !radios || wrapper4 !== radios[i].parentElement.parentElement) {
alert('ERROR: Wrapper for tabbed content is invalid.');
return;
}
[].forEach.call(labels, function(label) {
label.htmlFor = label.htmlFor.length ? label.htmlFor : Math.random().toString();
label.onclick = function (e){
[].forEach.call(labels, function(label) {
if (e.target === label){
e.target.classList.add('clicked');
}else if (e.target.parentElement === label.parentElement) {
label.classList.remove('clicked');
}
});
};
});
[].forEach.call(radios,function(radio, index) {
if (wrapper4 !== radio.parentElement.parentElement) {
wrapper4 = radio.parentElement.parentElement;
i++;
}
radio.name = 'hidden-radios-group-' + i;
if (radio.id.length) {
labels[index].htmlFor = radio.id;
} else {
radio.id = labels[index].htmlFor;
}
radio.checked && labels[index].classList.add('clicked');
});
})()
</script>
</body>
</html>
我正在尝试构建可重复使用的选项卡式内容。以下内容改编自 Shay Howe 的 jQuery 教程；赶上 HTML5/CSS3 技能。
我添加了边距以进一步突出显示该问题。一切都在现场，但左垂直边框与上面 tab/s 的左侧不对齐。在 CodePen 中有效，但在 Mozilla/IE.
中实践失败有人知道如何解决这个问题吗？
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TAB TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/main.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400">
</head>
<body>
<div class="tabs">
<ul class="tabs-nav">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div class="tabs-stage">
<div id="tab-1">
<p>Text for tab 1.</p>
</div>
<div id="tab-2">
<p>Text for tab 2.</p>
</div>
<div id="tab-3">
<p>Text for tab 3.</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="assets/script.js"></script>
</body>
</html>
CSS:
body {
MARGIN: 1.5%
color: #666;
font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.tabs {
max-width: 66.66666%;
MARGIN-LEFT: 50px
}
.tabs-nav li {
float: left;
width: 33.33333%;
list-style-type: none;
}
.tabs-nav li:first-child a {
border-right: 0;
border-top-left-radius: 6px;
}
.tabs-nav li:last-child a {
border-top-right-radius: 6px;
}
a {
background: #eaeaed;
border: 1px solid #cecfd5;
color: #0087cc;
display: block;
font-weight: 600;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
a:hover {
color: #ff7b29;
}
.tab-active a {
background: #fff;
border-bottom-color: transparent;
color: #2db34a;
cursor: default;
}
.tabs-stage {
border: 1px solid #cecfd5;
border-radius: 0px 0 6px 6px;
border-top: 0;
clear: both;
padding: 30px 30px;
position: relative;
top: 0px;
}
jQuery(jscript):
// Show the first tab by default
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');
// Change tab class and display content
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tabs-nav li').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).show();
});
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');
// Change tab class and display content
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tabs-nav li').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).show();
});
body {
MARGIN: 1.5%
color: #666;
font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.tabs {
max-width: 66.66666%;
MARGIN-LEFT: 50px
}
.tabs-nav li {
float: left;
width: 33.33333%;
list-style-type: none;
}
.tabs-nav li:first-child a {
border-right: 0;
border-top-left-radius: 6px;
}
.tabs-nav li:last-child a {
border-top-right-radius: 6px;
}
.tabs-nav {
padding-left: 0;}
a {
background: #eaeaed;
border: 1px solid #cecfd5;
color: #0087cc;
display: block;
font-weight: 600;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
a:hover {
color: #ff7b29;
}
.tab-active a {
background: #fff;
border-bottom-color: transparent;
color: #2db34a;
cursor: default;
}
.tabs-stage {
border: 1px solid #cecfd5;
border-radius: 0px 0 6px 6px;
border-top: 0;
clear: both;
padding: 30px 30px;
position: relative;
top: 0px;
}
<body>
<div class="tabs">
<ul class="tabs-nav">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div class="tabs-stage">
<div id="tab-1">
<p>Text for tab 1.</p>
</div>
<div id="tab-2">
<p>Text for tab 2.</p>
</div>
<div id="tab-3">
<p>Text for tab 3.</p>
</div>
</div>
</div>
尝试添加 padding-left: 0;到你的 ul class="tabs-nav"
基于 css 制作的选项卡式内容的另一个示例：已检查的伪 class 和一小段纯 JavaScript 代码。未使用 jQuery 或使用其他库。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Tabbed Content</title>
<style type="text/css">
.wrapper4 {
padding: 0;
float: left;
margin: 2%;
/*
Automatic calculation for the width of adjacent div.wrapper4 explained:
Take the whole width of the parent element and divide it by a number of
.wrapper4, then substract the .wrapper4 margin (above) multiplied by 2
(left and right margin) and substract 1% of the parent width just to be
sure to fit in.
Adjust this value manually for each .wrapper4 if you need to place them
in various regions of the page.
*/
width: calc(100% / 2 - 2% * 2 - 1%);
}
.wrapper4 > .tabs .tab, .wrapper4 > .tabbed > [type=radio] + .content, .wrapper4 > .tabs {
border: 3px solid lime;
}
.wrapper4 > .tabs {
border-top: none;
border-left: none;
border-right: none;
}
.wrapper4 > .tabs .tab {
display: inline-block;
background-color: lightGrey;
padding: 5px;
margin-bottom: -3px;/* Negating .tabs border-width */
}
.wrapper4 > .tabs .clicked{
border-bottom-color: transparent;
padding-top: 10px; /* Makes .clicked tab a bit higher (5px * 2). */
}
.wrapper4 > .tabbed > [type=radio] + .content {
padding: 10px;
border-top: none;
overflow: hidden;
}
.wrapper4 > .tabbed > [type=radio], .wrapper4 > .tabbed > :not(:checked) + .content {
display: none;
}
.wrapper4 > .tabbed > :checked + .content {
display: block;
}
.wrapper4 > .tabs :not(.clicked):hover {
background-color: darkGrey;
cursor: pointer;
}
.wrapper4 > .tabs .clicked, .wrapper4 > .tabbed > [type=radio] + .content {
background-color: pink;
}
</style>
</head>
<body>
<noscript>
<h3 style="text-align: center;"><mark>You need to enable JavaScript to see tabbed content on this page.</mark></h3>
</noscript>
<!-- First block of tabbed content. -->
<div class="wrapper4">
<nav class="tabs">
<label class="tab">Tab One</label>
<label class="tab">Tab Two</label>
<label class="tab">Tab Three</label>
</nav>
<div class="tabbed">
<!-- By default this tab is chosen using `checked' property. -->
<input type="radio" checked>
<!-- Put inside section.content any HTML content for the tab. -->
<section class="content">
<h2>Stuff for Tab One</h2>
<p>To add more tabs just put more <label class="tab"> elements with their relative <div class="tabbed"> blocks. The <mark>id</mark>, <mark>for</mark> and <mark>name</mark> attributes are added dynamically to the elements by JavaScript. For supporting fallback when JavaScript is disabled you have manually add those attributes for each radio and label element. Example:
<br>
<strong>
<label class="tab" for="tab-1">
</strong>
<br>
<strong>
<input type="radio" id="tab-1" name="the-same-for-each-block-of-tabbed-content">
</strong>
<br>
Also, you can do the same if for some reason you need your own attributes on some or all elements.
</p>
<p><em>Any number of tabs could be added on any number of blocks of tabbed content.</em></p>
</section>
</div>
<div class="tabbed">
<input type="radio">
<section class="content">
<h2>Stuff for Tab Two</h2>
<img style="float:left;" alt="Lorem Ipsum" title="Lorem Ipsum" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAEsCAYAAAA1nhbhAAALpElEQVR4nO2dy5XrIAyGacEtpIVpIS14l3VacAsuwS24oKknd3HDHEIkECAMxv93Drs8bAR6IcAYAAAAAAAAzLqur3VdX62fA5j/wjDG/LXn8wnBtMQXiIFg2rIsCykQY8zrdrtBKEfznglsm6YJQjmSeZ6DAnk3cBTvGcA2eF/HA2H0QsigQxgNiKmrho92PbZt+zW8VwUP62jeMcZX27bt11VliEUOgJsdbue77jCEUhludoQ+9/PzA6HUgJsd7xnxhWtTIJQKSGeHZd/3h/s5CEURLrMbizn870EoemRndP2cF4RSyLsDi4I/X91BKJlwquodbyThR/cQSh5fwsjtSN/IG8QpaWioKh9qxkEoArhsrkYml1rYQu4rAKVajNEtXuBimvd/AxcqtV7DAHMpfKynOFB2o5Y64WaiCaRjLkWgaKEaoZXHS7vFXLxxhE6/3++sUI56hq7gsrhH6vJA4vKSKkwlEq/xHG6bpukSs6Wb0cjNVL+9VdyQVHvZdV1fnJMwz/Pr3flfhIw89Tsaz9oFVAxQIoxt235jtb5+47yoQMpmWMGoCGNd11fMQxI0EkHdFylgbuZ1CReISYRhd0oJC6y1Oi/797uP9jmDyeWnuLikpKVuf9N4hp+fn/6Ek5O5LVVF9/s9WQAUqXYp1J7PZ3u3mVMxkgeTejzLsqh0fulzSFuzlAzlreQ+jO3wVtN/3/dHqvcVaoca/33fH5SXMspmTHdwSFrTh6Wm91VSDt1BTelRZsWpoNzDEaLXU+K6p9bVbP1MlwYCAEWs62rrsF7TNGFGt2Bd11cshmi0IDY+1vfPCeLgnv/nL4KXqg836NJOaxh4iDqd6CYT13VlR7o0aXnZEqCUbKrf6QV/K/q/yxp8bnWuYpQvHQTXhFsIqpgRxewQcKQrGhTGqdbFa0EtZFWsf2KFgXjkDVUAUXETDTwrIdUNK1f5gh1UBEx0rUoDB+K8UFG3trdzsK06N5Q60TayTMwDAnx0VoW8Uu3fHwt/44zWHvJt236pTTkIACMwhXVi9n1/pGSCIZAIjBf09RnbSks9cYpDhECAWK3By4pTVQBMAxw1Z4Rdmeyq3LN3UtbDb7cbOrg2vnektdcDZOIbdlSCdIBnR0BrrNrCGkVHIM8EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgTd48hzkHsAGqvOo7AaEjoUkfsPWxA7CptHCJwMIKzrsCRRA6gAUcSsh+lx2xQt07jHJUI3OzI6bSMK7+BCzc7pJ6VM9qTG9xqGvLQMe7DVgDUiaOS1uV9571AqRb3THaNe6fmeQ5eiQTexOKOnOYe53fs2wwAZcglZy/6R/zhUH0FqLwV0iONoOwBDjduBOWe4mKVtlQNzNZ1ffkXSeKKcQbKYJcYZHsIv/QmTyx6OWgIw3pVqadg2zhE7WXODhVRx4RRcgM0BBCASW98kJuHsm1ZFghAQurNOTF1hHPeC/CFgaxqQ3xh9JTacIPSaZrGn22uyullVsScgyEDUzdzO01Ts1lBLddKW08zWYNDgy/XwOcuVDFtDGroYrfTpdG4bdY+uAtTsfWXy2ebiSuLspp0UQqVkW9SR3eouSM/9Tm4ZeBLCcOYskjcrg5qrIdTA2NID0uKJDflLs9q/z+VBRg+Dumccb0qbazrWjlReG3bkcjX6JXYjUT1BnUlJeCJsbgBoTAvBXUlhbox2hg+ncEFeVwJKvN5ECJlmTe0bkLZBl8gVy07+nBlYx9mXOIvOPU2z7N4RvWSiT4UKukX8myYSPqD5/P59RlJQhMCMbxd4ITiR/S+WvGFkZJZ9gXy/q3rQY1ow6giX4DuKHbVVE78AIE4SCpPHL46zQq1ZK0FAvEgvCKOLJUkBALxkLicf51WIZKGQHxSomnJgpPvmUVc7CI7dFXYoDBlKZdxa6/t9mbyMYpzantt85OTrh0L7fK9NDZbG3CPk1oo++sK9/IrhbnVI7ZpbPQkarXGwa8Yyd27EWrahWvE2v5QFHX2NE3RwwC0BeJnAoaqVNy27TdlNlBLs7768g14pQ77eKYKv98e3zZIaqcCmV1SIFqVKK7Q4Wm9oeq0nM4mBeJ2ZEmtFjEQrg21lOpFzazK4mKSDNVDDYTrQQmDUBtBGxJym6XRt5t91ozYTxXbUMJgkozR0RsLIjOKrrU4x4xLPE5D1LGxemGBfVGdJdal7l4glDcVmdrikR7a7xHrZGKWFWEHSNdp/dRq84JVPW6miL9XWhZkB163WWTKI4r5/b4aShltTJAaxP+/kjUSO/i6jG2ozpG8rK9GUjsoYZn4D3+9P9cGeL/TB5yhlaZA/FmVM/1txyS6oBpC6UsglL3I6NBigRjzf2CkRPHUQMpQXykeXj32fX/4qqJgn7qKQHKgYpvb7SZ6Dz+L3Mz1pTbn52ZQqSrHoz0WLuCMbXXwXfvDCyioWVGayqZiihYuZCwLQJ3F5TsGh6ZQfFuhtabQi0CMKT+/yxxlR6yKqniKThcCsZRUvBwWsdeUvD/7ekhDpK6Mem0I2nsrBLmHbzZ6XD2sUe11bWHf90diDdn5OUs1iD03mBNQTzMcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgNOz2Oa1rXUE5SXvRQWW4HbZXvb2tOaF9gr3ubxwawR50EON+v2saYVYYUFtyPjotVzCho2a7PBGuV1IvqqQIHZwJLysR7lCYlANwqNMYhpwV+74/jgiwAsdbRKEM+ZCzguukZVnUo2BulsQ61j9kbMhZYYldzKL98qm2xLcbQ84KH8nZUlodQR0HGDHu13RnmTtvP5qWCvNVF3dgjR0oPZy91YSYUDTTEvY0ntDpQWc5WagqMaH0mu52rlUio/dT256QUFqP2tLLLE8rGM7QHyEQ927FksMsuXZaoVCHLWv9trUhmle3Strpr9vb9/1xv99f0zRl2Q93tJvCUe03lRccGa2RfvpR3AuSWOb5fH6tizQ/f310UtULpc5ae3OXhsqnwUY0xHdtL5e36hAIoxeI7C9oiVu0ILEbbgQPO1MHkasbWkhrfVdJVWxkPs9z9cxu6DaFdV1fsdVMvw03Y6hIu3QJd9u230BH/Y3wdV1fksAy1oYQimQk5kbPJdlaKyg3uNy27XfIYrl93x9MNlf1ZWNJRarThagOnCZoZV0z/lq9wwIz7xxIZsOyLK/YfU05AnE7T0ulUO9zOm/LXxCymVc/kccJJLczXWdBKxKnZvoQBt2HK2guGX2E01AMo3rHI+dy+xhE57Gfk2Z+mYEzJB8vqaFiOIE4MUq0+UEqVQFZ+pzdQY1OjWjdH82hOMJv9/s99AxjC8RXV1peiy+QkBdnPT3hiuHYAjEVZocxpL7X4loC0fpRCCQf9XjBGAgkG1e3QyAd4KYjNLceSAViMwl+WiRQODe2QGqNZOp3bedLXWBm087YAjHmU21p7VwK7S+XtECGeHyBSNMcKaQIxF0fEfz0x3eHrXbUniU1hPzm43eHzPYao5+dhUAK8RN3paqAKJ7QQmL4h0HidoogUvrFUHZpaIG4JTkKL6ouECptP7RA3PiglUBC+0yopYKhBeLqfYUtZkGB2IUqyZY4W9NLpfCHFog7AhX8+4+OW5YluUxU0obem+ilNEoRd6qdAVwLVUKeyu1194WnViyW/rf/f6VbmwM1wP2jqRpsHVfmo7yM0VkWpjys0+y80qgop1rqhhmrAhX1/DnVVWmmVdKkZ69rdlqNYPMwQu6k5IDj1CLtQtUmwn2eU7q7fn1tboft+/5IOUKj5llVt9sNZ7275Ox6sjOy0SNfh1xvzs4gCKkSKevkoWbtkG2lRXs2PUM1ajCdbq+JhNLdWi3bafcqSti27TcjO9CkHbEdvCtiW+ZaNNxhZdLd5xpt6OxwCVqOgKQ9n89xy4VqUEM48zxDJWlQsq8eQjiAUNxgDTPUEQAAAAAAAOBq/AOWrdk1HQ4NlAAAAABJRU5ErkJggg==">
<p>Sed egestas lorem mi, quis fringilla arcu fermentum pellentesque. Praesent auctor sed diam at pharetra. Vivamus a sem libero. Donec augue lorem, cursus ac sem sit amet, commodo commodo est. Ut sodales elementum ipsum, nec tempor nulla tincidunt et. Vivamus sodales pharetra nunc ut commodo. Proin sed vehicula tortor, finibus mollis ipsum. Vestibulum rutrum lobortis ligula, eu pretium sapien malesuada rhoncus. Phasellus auctor quam quis eleifend laoreet.</p>
<h3>Donec eleifend sem eu metus facilisis</h3>
<p>Nam cursus risus dignissim nunc bibendum dictum. Aliquam fermentum, odio auctor congue vulputate, dui diam mattis massa, cursus dapibus elit nulla et sem. Mauris convallis arcu at rutrum aliquam. Aenean lectus enim, faucibus a tellus sit amet, vulputate mattis augue. Donec eleifend sem eu metus facilisis, mattis porta lacus viverra. Donec tincidunt lacus vel leo mattis, sit amet auctor ligula tempus. Integer dapibus lacus a dui pellentesque, ac porttitor mi venenatis. Proin a justo at enim consequat molestie. Sed eget feugiat nulla.</p>
</section>
</div>
<div class="tabbed">
<input type="radio">
<section class="content">
<h2>Stuff for Tab Three</h2>
<p>To be continued ...</p>
</section>
</div>
</div>
<!-- Second block of tabbed content. -->
<div class="wrapper4">
<nav class="tabs">
<label class="tab">Tab One</label>
<label class="tab">Tab Two</label>
</nav>
<div class="tabbed">
<input type="radio" >
<section class="content">
<h2>Stuff for Tab One</h2>
<img style="float:right;" alt="Enjoy" title="Enjoy" src="data:image/png;base64,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">
<p><em>Enjoy )) ...</em></p>
</section>
</div>
<div class="tabbed">
<input type="radio" checked>
<section class="content">
<h2>Stuff for Tab Two</h2>
<p>This is the second block of tabbed content. Note that in this block the <strong>Tab Two</strong> is chosen by default. You can change this behaviour by moving <mark>checked</mark> default attribute on another radio input element.</p>
</section>
</div>
</div>
<!-- The script automatically sets `id' and `name' attribute for each radio
input element and `for' attribute for each its respective label in the stack.
Also, sets onclick event handling for labels, which adds or removes `clicked'
class on them.
The manually added `id' and `for' attributes are NOT overwritten. -->
<script type="text/javascript">
(function() {
var i = 0,
labels = document.querySelectorAll('.wrapper4 > .tabs .tab'),
wrapper4 = labels ? labels[i].parentElement.parentElement : false,
radios = document.querySelectorAll('.wrapper4 > .tabbed > [type="radio"]');
if (!wrapper4 || !radios || wrapper4 !== radios[i].parentElement.parentElement) {
alert('ERROR: Wrapper for tabbed content is invalid.');
return;
}
[].forEach.call(labels, function(label) {
label.htmlFor = label.htmlFor.length ? label.htmlFor : Math.random().toString();
label.onclick = function (e){
[].forEach.call(labels, function(label) {
if (e.target === label){
e.target.classList.add('clicked');
}else if (e.target.parentElement === label.parentElement) {
label.classList.remove('clicked');
}
});
};
});
[].forEach.call(radios,function(radio, index) {
if (wrapper4 !== radio.parentElement.parentElement) {
wrapper4 = radio.parentElement.parentElement;
i++;
}
radio.name = 'hidden-radios-group-' + i;
if (radio.id.length) {
labels[index].htmlFor = radio.id;
} else {
radio.id = labels[index].htmlFor;
}
radio.checked && labels[index].classList.add('clicked');
});
})()
</script>
</body>
</html>