Menu change color and description when selected

Question

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

I saw on this site and was trying to use as a basis: http://www.barietoner.com.br/servicos.html

My code is 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 doesn’t work... Would there be some way to fix or create it in a simple way?

Answer 1

I don’t know if I understand your question correctly, but I believe you can do this using the :Hover and :select CSS selectors

Example:

CSS:

  <style type="text/css" media="screen">        
    .menu li { display: inline; background: #999;  }
    .menu li:hover { background: #222; }
    .menu li:select { background: #00f; }
  </style>

html:

  <ul class="menu">
    <li><a href="">Home</a></li>
    <li><a href="">Notícias</a></li>
  </ul>

So, in the :Hover property you set the color that should appear when the mouse is over the link and in :select you should set the color that appears when it is selected.

References: http://www.w3schools.com/cssref/sel_hover.asp