Html GWT超链接焦点在CSS上的行为类似于活动

我一直在使用一些GWT代码

我试图对我的模板应用一些样式，但当我将CSS应用于超链接时，我发现：focus方法充当：active，我的意思是，当我按下超链接时，它会持续，但如果我双击同一超链接，它会神奇地工作！，我试过使用Anchor小部件，但如果我这样做，我必须重写大量代码，并且不能使用历史记录

我对正在发生的事情做了一个假设，不确定是错是对，我相信当GWT使用AJAX时，它只是刷新页面

.Template-link
{
    COLOR: #ab1e2c;
FONT-FAMILY: Tahoma;
FONT-SIZE: 10pt;
LINE-HEIGHT: 43px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
}
.Template-link a:focus
{
    COLOR: green !important;
}

你知道这里发生了什么吗

提前谢谢

---

更多代码（来自公共模板）

---

我认为这里发生的是

如果我们使用give“focus”给超链接，它现在进入：focus状态（使用“Tab”导航到它）。单击（或在有焦点时按空格键），超链接将进入其（：active）状态

当您在某个元素上单击（或在焦点上按空格键）时，您将为其指定焦点，这也将暗示：focus和：active是相同的。它们不一样。单击时，按钮处于：焦点：活动状态

我看到您提供的代码中缺少声明

.Template-link a:focus{}

也可以尝试添加

.Template-link a:focus a:active{}

---

已解决

我在我的公共模板中添加了以下代码

package com.test.web.ui;

import com.foboa.fbwt.user.client.Page;
import com.foboa.fbwt.user.client.Template;

import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Hyperlink;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.inject.Inject;
import com.google.inject.Singleton;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Anchor;

import com.test.web.client.Item;
import com.test.web.client.css.TestCssBundle;
import com.test.web.client.constants.TestConstants;
import com.test.web.client.images.IconBundle;

@Singleton
public class PublicTemplate extends Template {

private final DockPanel main = new DockPanel();

private final IconBundle iconBundle;

private final TestConstants constants;

private final TestCssBundle cssBundle;

@Inject
private PublicTemplate(IconBundle iconBundle, TestConstants constants,
           TestCssBundle cssBundle) {
this.iconBundle = iconBundle;
this.constants = constants;
    this.cssBundle = cssBundle;
}

@Override
public final void loadPage() {
Page page = getPage();
main.add(page, DockPanel.CENTER);
main.setCellHorizontalAlignment(page,
                HasHorizontalAlignment.ALIGN_CENTER);
}

@Override
public final void loadTemplate(){
main.setWidth("100%");
setWidget(main);
loadHeader();
loadFooter();
}

private void loadFooter(){
//create footer panel
HorizontalPanel footerPanel = new HorizontalPanel();
footerPanel.setWidth("100%");
//include footer content
main.add(footerPanel, DockPanel.SOUTH); 
}

private void loadHeader(){
HorizontalPanel headerPanel = new HorizontalPanel();
HorizontalPanel linkPanel = new HorizontalPanel();
headerPanel.setWidth("950px");
headerPanel.setHeight("86px");

    Hyperlink contact = new Hyperlink(Item.CONTACT.getLabel(),
                   Item.CONTACT.getTarget());

contact.setWidth("94px");
contact.addStyleName(cssBundle.testCss().testTemplateLink());   
linkPanel.add(contact);
    linkPanel.setHeight("43px");

headerPanel.add(linkPanel);
DOM.setStyleAttribute(linkPanel.getElement(), "backgroundImage","url(menu.png)");
headerPanel.setCellVerticalAlignment(linkPanel,
                      HasVerticalAlignment.ALIGN_BOTTOM);
main.add(headerPanel, DockPanel.NORTH);
}
}

home.addClickHandler(new ClickHandler(){
    public void onClick(ClickEvent event){
        home.addStyleName(cssBundle.testCss().
        contact.removeStyleName(cssBundle.testCss().
                  testTemplateLink2());
    }
    });

   contact.addClickHandler(new ClickHandler(){
    public void onClick(ClickEvent event){
        home.removeStyleName(cssBundle.testCss().
                  testTemplateLink2());
        contact.addStyleName(cssBundle.testCss().
                    testTemplateLink2());
    }
    });

对于每个链接以及我的样式，分别为：

    .Template-link
{
COLOR: #808080;
FONT-FAMILY: Tahoma;
FONT-SIZE: 10pt;
LINE-HEIGHT: 43px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
}

.Template-link a 
{
COLOR: #808080;
TEXT-DECORATION: none;
VERTICAL-ALIGN:text-middle;
}

.Template-link2 
{
COLOR: #AB1E2C;
FONT-FAMILY: Tahoma;
FONT-SIZE: 10pt;
LINE-HEIGHT: 43px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
}

.Template-link2 a
{
COLOR: #AB1E2C;
TEXT-DECORATION: none;
VERTICAL-ALIGN:text-middle;
}

---

我留下这些方法和我的解决方案，以防有人遇到同样的问题。

请提供一些更具体的代码…@Onkar我已经添加了一些代码，我不确定是否适合您，或者您需要更多的代码来查看发生了什么，无论如何，请让我知道。这就是发生的情况，我的a:focus保持在a:focus活动状态，但我试过a：焦点a：活动，它不会改变它的状态。。。我需要它保持与a:focus相同的颜色（当用户停留在页面上直到他/她单击菜单上的另一个超链接）这听起来很幼稚，但请尝试您为css设置的顺序…在激活前聚焦，在激活后聚焦一起激活…如果有任何内容覆盖了您的css声明，请使用firebug进行检查