How to switch the active style of css menu item

Hello,

i have designed a css menu and i want to switch the current active item. I tried to listen to the clickevent of the labels, but the style won't change, because the labels are wraped into a div element. how can i get the a element (label1) with the "current"-class style and remove the style? After that, add the current style to label2?

If this isn't the right approach, can you help me and tell me a better solution?

The code:

Code:

---

private Label label2;
private Label label1;

public void onModuleLoad() {

        final Viewport viewport = new Viewport();
        viewport.add(createHeader());

        RootPanel.get().add(viewport, 0, 0);
    }

    private HtmlLayoutContainer createHeader() {
        final SafeHtmlBuilder sb = new SafeHtmlBuilder();

        sb.appendHtmlConstant("<div id='tabs26'>" + "<ul><li><a href='#' class='label1 current'></a></li> "
                + "<li><a href='#' title='css menus' class='label2'></a></li> "
                + "<li><a href='#' title='css menus'>Services</a></li> "
                + "<li><a href='#' title='css menus'>Our Work</a></li> "
                + "<li><a href='#' title='css menus'>Contact Us</a></li> " + "</ul> </div>");

        final HtmlLayoutContainer htmlLcHeader = new HtmlLayoutContainer(sb.toSafeHtml());
        htmlLcHeader.setId("headerBackground");
        htmlLcHeader.setStateful(false);

        label1 = new Label("Table");
        label1.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                label1.setStyleName("current", false);
                label2.setStyleName("current", true);
            }
        });
        label2 = new Label("Results");
        label2.setHeight("42");
        label2.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                label2.setStyleName("current", true);
                label1.setStyleName("current", false);
            }
        });
        htmlLcHeader.add(label1, new HtmlData(".label1"));
        htmlLcHeader.add(label2, new HtmlData(".label2"));

        return htmlLcHeader;
}

---

The CSS-Sheet:

Code:

---

#tabs26 {
    position: relative;
    display: block;
    height: 42px;
    font-size: 11px;
    font-weight: bold;
    background: transparent url(../images/greenslate_background.gif) repeat-x
        top left;
    font-family: Arial, Verdana, Helvitica, sans-serif;
    text-transform: uppercase;
    width: 100%;
    overflow: hidden;
}

#tabs26 ul {
    position: relative;
    margin: 0px auto;
    padding: 0;
    list-style-type: none;
    left: 50%;
    float: left;
}

#tabs26 ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0 1px 0 0;
    right: 50%;
}

#tabs26 ul li a {
    position: relative;
    display: block;
    color: #EEFFDF;
    text-decoration: none;
    padding: 14px 22px 0 22px;
    height: 28px;
}

#tabs26 ul li a:hover,#tabs26 ul li a.current {
    color: #fff;
    background: transparent url(../images/greenslate_backgroundOVER.gif)
        no-repeat top center;
}

---

I have attached the java-class, the style sheet and the pictures.