How to initialize a button then swap it while clicking it?

I can’t figure out how to initialize a button then swap it while clicking it
My buttons are loaded dynamically from a xml file.

For example:
Home | Portfolio | Contact

I want to initialize on Home with a color(blue). When I click on another button, it will swap place. How can I do that?

Here’s my code so far:

var menuHolder:Sprite = new Sprite();
addChild(menuHolder);

for each(var item:XML in this.parser.xmlArrayList) {
var button = new Sprite();
button.mouseChildren = false;
button.buttonMode = true;
button.name = “option”+count;

button.addChild(createUpStateBtn());
button.addChild(createOverStateBtn());
menuHolder.addChild(button);

button.addEventListener(MouseEvent.MOUSE_OVER,displayMouseOver);
button.addEventListener(MouseEvent.MOUSE_OUT,displayMouseOut);
button.addEventListener(MouseEvent.CLICK, displayMouseClick);

button.x = xPos; // Position
xPos += button.width+1; // Give a space between each button
count++;
}

public function createUpStateBtn():Sprite {
var up:Sprite = new Sprite();
up.graphics.beginFill(0xCCCCCC);
up.graphics.drawRect(0, 0, 80, 20);
up.name = “up”;
return up;
}

public function createOverStateBtn():Sprite {
var over = new Sprite();
over.graphics.beginFill(0x00CCFF);
over.graphics.drawRect(0, 0, BTN_WIDTH, BTN_HEIGHT);
over.name = “over”;
over.alpha = 0; // init to hide this color
return over;
}

public function displayMouseOut(event:MouseEvent):void {
event.currentTarget.getChildByName(“over”).alpha = 0;
}

public function _displayMouseOver(event:MouseEvent):void {
event.currentTarget.getChildByName(“over”).alpha = 100;
}

public function displayMouseClick(event: MouseEvent):void {
switch(event.currentTarget.name) {
case “option0” :
case “option1” :
}
}