JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<a href="#chase">Chase</a> | <a href="#dan">Dan</a>

CSS

a {color:blue}
.selected {color: red}

JavaScript

OCP = {namespace: 'ocp'};
Object.append(OCP,new Events());
var namespace = OCP;

(function(namespace){

    /*
     *
     *  
     */
    var State = namespace.State = new Class({
        namespace: 'state',
        Implements: [Events,Options],
        state: {},
        options: {
            cookie: true
        },
        
        /*
         *
         */
        initialize: function(state){
            
            //this.state = state || {};
            if(this.options.cookie){
                this.state = new Hash.Cookie(this.getCookieName(),{duration: 3600});
                this.state.extend(state);
                                this.state.load();
            } else {
                this.state = new Hash(state);   
            }
        },
        
        set:function(key,value){
            this.state.set(key, value);
            namespace.fireEvent(['ocp',this.name,key,'set'].join('.'),value);
        },
        
        get: function(key, dflt){
            return this.state.get(key)?this.state.get(key):(dflt||false);
        },
                
        getCookieName:function(){
                    return (namespace.namespace || '') + this.namespace;
                }
    });
    
    
})(namespace);

var state = new OCP.State();

window.addEvent('domready',function(){
    var links = $$('a');
    links.forEach(function(link,i){
        if(link.get('text') == state.get('name')){
            links.removeClass('selected');
            link.addClass('selected');
        } 
        link.addEvent('click',function(e){
            e.preventDefault();
            links.removeClass('selected');
            link.addClass('selected');
            state.set('name',link.get('text'));
            console.log(state.state);
        });
    });
});