zikes/Alternator.js

## Alternator.js
function Alternator(opts){
  var options = {
    activate:function(){},
    deactivate:function(){},
    elements: [],
    active: 0
  };

  // Overwrite defaults with user options
  for(var opt in opts) if(opts.hasOwnProperty(opt)){
    options[opt] = opts[opt];
  }

  // Set the action(s) to be performed when an element is
  // activated or deactivated
  this.activate = options.activate;
  this.deactivate = options.deactivate;

  // If the user specified an element index for the currently active,
  // replace it with an element reference
  if(typeof options.active === 'number'){
    options.active = options.elements[options.active] || options.elements[0];
  }
  if(options.active) this.activate(options.active);

  // Add element(s) to Alternator
  this.add = function(el){
    if(!el) return;
    if(el.length){
      Array.prototype.forEach.call(el,function(el){
        options.elements.push(el);
      })
    }else{
      options.elements.push(el);
    }
    return this;
  }

  this.getElements = function(){
    return options.elements;
  }

  // Set the currently active element
  this.set = function(el){
    var self = this;
    if(typeof el === 'number'){
      if(options.elements[el]){
        if(options.active) self.deactivate(options.active);
        self.activate(options.elements[el]);
        options.active = options.elements[el];
      }else{
        throw new Error('Invalid element index');
      }
    }else{
      options.elements.forEach(function(e){
        if(e === el){
          if(options.active) self.deactivate(options.active);
          self.activate(e);
          options.active = e;
        }
      })
    }
    return this;
  }

  return this;
}

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Alternator Class</title>
    <style>
      .container, .also_container, .container_too{display:inline-block; background:#ccc; width:100px; height:100px;}
      .active{background:steelblue;}
    </style>
    <script src="Alternator.js"></script>
  </head>
  <body>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <script>
      var alt = new Alternator({
        activate:function(el){
          el.className = 'container active';
        },
        deactivate:function(el){
          el.className = 'container';
        },
        elements: Array.prototype.slice.call(document.querySelectorAll('.container')),
        active: 2
      });

      alt.getElements().forEach(function(el){
        el.addEventListener('click',function(evt){
          alt.set(el);
        })
      })
    </script>
  </body>
</html>
	function Alternator(opts){
	var options = {
	activate:function(){},
	deactivate:function(){},
	elements: [],
	active: 0
	};

	// Overwrite defaults with user options
	for(var opt in opts) if(opts.hasOwnProperty(opt)){
	options[opt] = opts[opt];
	}

	// Set the action(s) to be performed when an element is
	// activated or deactivated
	this.activate = options.activate;
	this.deactivate = options.deactivate;

	// If the user specified an element index for the currently active,
	// replace it with an element reference
	if(typeof options.active === 'number'){
	options.active = options.elements[options.active] \|\| options.elements[0];
	}
	if(options.active) this.activate(options.active);

	// Add element(s) to Alternator
	this.add = function(el){
	if(!el) return;
	if(el.length){
	Array.prototype.forEach.call(el,function(el){
	options.elements.push(el);
	})
	}else{
	options.elements.push(el);
	}
	return this;
	}

	this.getElements = function(){
	return options.elements;
	}

	// Set the currently active element
	this.set = function(el){
	var self = this;
	if(typeof el === 'number'){
	if(options.elements[el]){
	if(options.active) self.deactivate(options.active);
	self.activate(options.elements[el]);
	options.active = options.elements[el];
	}else{
	throw new Error('Invalid element index');
	}
	}else{
	options.elements.forEach(function(e){
	if(e === el){
	if(options.active) self.deactivate(options.active);
	self.activate(e);
	options.active = e;
	}
	})
	}
	return this;
	}

	return this;
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Alternator Class</title>
	<style>
	.container, .also_container, .container_too{display:inline-block; background:#ccc; width:100px; height:100px;}
	.active{background:steelblue;}
	</style>
	<script src="Alternator.js"></script>
	</head>
	<body>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<script>
	var alt = new Alternator({
	activate:function(el){
	el.className = 'container active';
	},
	deactivate:function(el){
	el.className = 'container';
	},
	elements: Array.prototype.slice.call(document.querySelectorAll('.container')),
	active: 2
	});

	alt.getElements().forEach(function(el){
	el.addEventListener('click',function(evt){
	alt.set(el);
	})
	})
	</script>
	</body>
	</html>