JSFiddle - React, Tailwind, and code Playground

by Anton Smirnov

HTML

<div id="ietabs">
					    <a href="#" id="tab1" class="active">Импорт из Excel</a>
					    <a href="#" id="tab2">Экспорт в Excel</a>
					    <a href="#" id="tab3">Сохранить в PDF</a>
					    <div id="con_tab1" class="active">Содержимое 1</div>
					    <div id="con_tab2">Содержимое 2</div>
					    <div id="con_tab3">Содержимое 3</div>
					</div>

CSS

#ietabs div {
    display:none;
}

#ietabs div.active {
    display:block;
    width:100%;
    border: 1px solid #999;
}

#ietabs a {
	text-decoration: none;
   border:1px solid #999;
	padding:5px 15px 5px 15px;
	text-align: center;	
   border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;
   border-bottom:1px solid #fff;   
	font-family:Verdana,Geneva,sans-serif;font-size:12px;color:black;    			
}

#ietabs a.active {
	text-align: center;
	line-height: 25px;	
	font-family:Verdana,Geneva,sans-serif;font-size:12px;color:#FFF;	
	padding:5px 15px 5px 15px;
	border:1px solid #999;
   border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;
   border-bottom:1px solid #2ca5b5;
   background: #2ca5b5;
   background: -webkit-gradient(linear, left top, left bottom, from(#13666c), to(#2ca5b5));
   background: -webkit-linear-gradient(top, #13666c, #2ca5b5);
   background: -moz-linear-gradient(top, #13666c, #2ca5b5);
   background: -ms-linear-gradient(top, #13666c, #2ca5b5);
   background: -o-linear-gradient(top, #13666c, #2ca5b5);
   background-image: -ms-linear-gradient(top, #13666c 0%, #2ca5b5 100%);
}

JavaScript

$('#ietabs a').click(function() {
        var click_id=$(this).attr('id');
        if (click_id != $('#ietabs a.active').attr('id') ) {
            $('#ietabs a').removeClass('active');
            $(this).addClass('active');
            $('#ietabs div').removeClass('active');
            $('#con_' + click_id).addClass('active');
        }
    });