JSFiddle - React, Tailwind, and code Playground

by Dmitry Smolyakov

HTML

<div class="container">
        	<div class="tabs">
            	<a href=""><span class="active">Newest</span></a>
                <a href=""><span>Oldest</span></a>
                <a href=""><span>Add</span></a>
            </div>
        </div>
		
		
		
       
        <section class="text">
            <div id="replace"></div>
        </section>
        <div id="div1">
            <em>Первая</em> 
            Атамта
        </div>
        
        <div id="div2">
        Вторая атамта
        </div>
        
        <div id="div3">
        топ кек
        </div>
		
        <div id = "text"></div>
            <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
   
    <script src="app.js"></script>

CSS

.tabs a span {
    border-radius: 5px 5px 0 0;
    display: inline-block;
    width: 100px;
    margin-right: 0em;
    text-align: center;
    background: #ddd;
    padding: 5px;
}
.tabs a .active {
    background-color: #ee1;
}

#div1, #div2, #div3{
    display: none;
}

#box{
    border:2px solid #000;
    width:50%;
    
    min-height:310px;
    
}

JavaScript

var main = function(){
    "use strict";
    
       

    
    
     $(".tabs a span ").toArray().forEach(function(element){
         /*var $td = $(element);
         $td.on("click",function(){
             $(".container table td").removeClass("active");
             $td.hide();
             $tb.addClass("active");
             $td.fadeIn();
             
             return false;*/  
        $(element).on("click", function (){
        $(element).hide();
            
        $(".tabs a span").removeClass("active"); 
        $(element).addClass("active");
        
        $(element).fadeIn();       
           return false;
        });
         
         
         
         
    });
   
      //!!!!!!!!!!!!!!!!!!!!  
    

       
       
             $(".tabs a span:nth-child(1)").click(function(){
            
                $(".text").children().empty().replaceWith(function(){
            
                var txt1 = $("#div1").html();
                
                return txt1;
                });
            });
            $(".tabs a span:nth-child(2)").click(function(){
                $(".text").children().empty().replaceWith(function(){
            
                var txt2 = $("#div2").html();
                
                return txt2;
                });
            }); 
            $(".tabs a span:nth-child(3)").click(function(){                                   
                $(".text").children().empty().replaceWith(function(){
            
                var txt3 = $("#div3").html();
                
                return txt3;
                });
                            
             });
   
         
    
};
$(document).ready(main);