Question

我一直在使用一些GWT代码......

我正在尝试将一些Style应用到我的模板中，但是当我将CSS应用于Hyperlink时，我发现a：focus方法的作用是：active，我的意思是它只是在我按下Hyperlink时持久但是如果我双击相同的超链接它神奇地工作！，我尝试过使用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;
}

那么，你知道这里发生了什么吗？

提前致谢

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

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);
}
}

Answer 1

我认为这里发生的是这个，

如果我们使用give＆＃34;焦点＆＃34;对于超链接，它现在进入其：焦点状态（使用＆＃34; Tab＆＃34;导航到它）。单击（或在有焦点时按空格键），超链接进入其（激活）状态。

当您在元素上单击（或按焦点上的空间）时，会给它焦点，这也暗示：focus和：active是相同的。他们不一样。单击时按钮处于：焦点：活动状态。

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

.Template-link a:focus{}

还尝试添加

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

Answer 2

<强>解决

我将以下代码添加到我的公共模板

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;
}

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

GWT Hyperlink Focus在CSS上就像Active一样

2 个答案: