Menu change color and description when selected

Hello, I was trying to create a menu that when it is selected it changes color, but when selecting another its color returns to normal and the other activates the color. Also when selected, the base text changes, for example:

I saw this site and was trying to use it as a base: link

My code looks like this:

  <div class='tabs tabs_animate'>
         <center> <ul class='horizontal'> 
            <li><a href="#div1">Ativa Descrição 1</a></li>
            <li><a href="#div2">Ativa Descrição 2</a></li>
            <li><a href="#div3">Ativa Descrição 3</a></li>
            <li><a href="#div4">Ativa Descrição 4</a></li>
          </ul> </center>
         <li> <div id="div1"> ativa quando clicar no 1° butão</div></li>
         <li> <div id="div2"> ativa quando clicar no 2° butão</div></li>
         <li> <div id="div3"> ativa quando clicar no 3° butão</div></li>
         <li> <div id="div4"> ativa quando clicar no 4° butão</div></li>

Css:

        /**
         * TABS
         *
         *                         
         */
        .tabs > DIV {
            /*border-top: 1px solid #c7c7c7*/
            margin-top: 10px;
            background: white !important;
            /*border-bottom: 4px solid #E95855 !important;*/
        }


        .tabs UL.horizontal {
            list-style: none outside none;
            margin: 0;
        }

        .tabs LI {
            background: white;
            border-bottom: 4px solid #E5E5E5;
            margin: 0 10px 0 0;
            display: inline-block;
        }

        .tabs A {
            color: #ccc;
            display: block;
            font-size: 18px;
            font-weight: 300;
            padding: 14px 24px;
            text-decoration: none;
        }

Js:

                    !function($,window,undefined){"use strict";$.fn.tabslet=function(options)
        {var defaults={mouseevent:"click",attribute:"href",animation:!1,autorotate:!1,deeplinking:!1,pauseonhover:!0,
        delay:2e3,active:1,container:!1,controls:{prev:".prev",next:".next"}},options=$.extend(defaults,options);
        return this.each(function(){function deep_link(){var t=[];elements.find("a").each(function(){t.push($(this)
        .attr($this.opts.attribute))});var e=$.inArray(location.hash,t);return e>-1?e+1:$this.data("active")||options.active}
        var $this=$(this),_cache_li=[],_cache_div=[],_container=options.container?$(options.container):$this,_tabs=_container.find("> div");_tabs.each
        (function(){_cache_div.push($(this).css("display"))});var elements=$this.find("> ul > li"),i=options.active-1;
        if(!$this.data("tabslet-init")){$this.data("tabslet-init",!0),$this.opts=[],$.map(
        ["mouseevent","attribute","animation","autorotate","deeplinking","pauseonhover","delay","container"],
        function(t){$this.opts[t]=$this.data(t)||options[t]}),$this.opts.active=$this.opts.deeplinking?deep_link()
        :$this.data("active")||options.active,_tabs.hide(),$this.opts.active&&(_tabs.eq($this.opts.active-1).show(),
        elements.eq($this.opts.active-1).addClass("active"));var fn=eval(function(t,e){var o=e?elements.find
        ("a["+$this.opts.attribute+"="+e+"]").parent():$(this);o.trigger("_before"),elements.removeClass("active"),
        o.addClass("active"),_tabs.hide(),i=elements.index(o);var n=e||o.find("a").attr($this.opts.attribute);
        return $this.opts.deeplinking&&(location.hash=n),$this.opts.animation?_container.find(n).animate({opacity:"show"},
        "slow",function(){o.trigger("_after")}):(_container.find(n).show(),o.trigger("_after")),!1}),init=eval("elements.
        "+$this.opts.mouseevent+"(fn)"),t,forward=function(){i=++i%elements.length,"hover"==$this.opts.mouseevent?elements.eq(i)
        .trigger("mouseover"):elements.eq(i).click(),$this.opts.autorotate&&(clearTimeout(t),
        t=setTimeout(forward,$this.opts.delay),$this.mouseover(function(){$this.opts.pauseonhover&&
        clearTimeout(t)}))};$this.opts.autorotate&&(t=setTimeout(forward,$this.opts.delay),$this.hover
        (function(){$this.opts.pauseonhover&&clearTimeout(t)},function(){t=setTimeout(forward,$this.opts.delay)}
        ),$this.opts.pauseonhover&&$this.on("mouseleave",function(){clearTimeout(t),t=setTimeout
        (forward,$this.opts.delay)}));var move=function(t){"forward"==t&&(i=++i%elements.length),"backward"==t&&
        (i=--i%elements.length),elements.eq(i).click()};$this.find(options.controls.next).click(function()
        {move("forward")}),$this.find(options.controls.prev).click(function(){move("backward")}),$this.on
        ("show",function(t,e){fn(t,e)}),$this.on("next",function(){move("forward")}),$this.on("prev",function()
        {move("backward")}),$this.on("destroy",function(){$(this).removeData().find("> ul li").each(function()
        {$(this).removeClass("active")}),_tabs.each(function(t){$(this).removeAttr("style").css("display",_cache_div[t])})})}})},$
        (document).ready(function(){$('[data-toggle="tabslet"]').tabslet()})}(jQuery);

But it does not work ... Would there be any way to repair or create it in a simple way?