test záložek Digitgor 2018

by Petr Haluza

HTML

<div class="tab-parent">
    <ul class="tabs">
        <li><a href="#tab1">1</a></li>
        <li><a href="#tab2">2</a></li>
    </ul>
    
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            Tab Content 1
        </div>
        <div id="tab2" class="tab_content">
           Tab Content 2
        </div>
    </div>    
    <div class="clear"></div>
</div>
<br /><br />
<div class="tab-parent">
    <ul class="tabs">
        <li><a href="#tab3">3</a></li>
        <li><a href="#tab4">4</a></li>
    </ul>
    
    <div class="tab_container">
        <div id="tab3" class="tab_content">
            Tab Content 3
        </div>
        <div id="tab4" class="tab_content">
           Tab Content 4
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS

.tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
}

.tab_content {  padding: 20px;}

.clear { clear: both;}

	.tab-parent {
				width: 80%;
				min-width: 400px;
				margin: 0 auto;
				margin-bottom: 68px;
				border-bottom: 4px solid #000;
				overflow: hidden;
				transition: border 250ms ease;
			}
			.tab-parent ul {
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				float: left;
				padding-left: 48px;
				list-style-type: none;
			}
			.tab-parent ul * {
				margin: 0px;
				padding: 0px;
			}
			.tab-parent ul li {
			  border-radius: 8px 8px 0 0;
				display: block;
				float: left;
				padding: 10px 24px 8px;
				background-color: #FFF;
				margin-right: 46px;
				z-index: 2;
				position: relative;
				cursor: pointer;
				color: #777;
				transition: all 250ms ease;
			}
			.tab-parent ul li:before,
			.tab-parent ul li:after {
				display: block;
				content: " ";
				position: absolute;
				top: 0;
				height: 100%;
				width: 44px; 	
				background-color: #FFF;
				transition: all 250ms ease;
			}
			.tab-parent ul li:before {
			  border-radius: 0 8px 0 0;
				right: -24px;
				transform: skew(30deg, 0deg);
				box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
			}
			.tab-parent ul li:after {
			  border-radius: 8px 0 0 0;
				left: -24px;
				transform: skew(-30deg, 0deg);
				box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
			}
			.tab-parent ul li:hover,
			.tab-parent ul li:hover:before,
			.tab-parent ul li:hover:after {	background-color: #F4F7F9;	color: #444;}
			.tab-parent ul li.active {z-index: 3;	}
			.tab-parent ul li.active,
			.tab-parent ul li.active:before,
			.tab-parent ul li.active:after {background-color: #000;	color: #fff;}

JavaScript

$(document).ready(function() {

    $('.tab-parent').each(function(){
        $(this).find(".tab_content").hide(); //Hide all content
        $(this).find("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(this).find(".tab_content:first").show(); //Show first tab content
    });

    $("ul.tabs li").click(function() {
        var parents = $(this).parentsUntil('.tab-parent').parent();
        $("li", parents).removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content", parents).hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });
});